微信小程序系列开发(一）

时间 2020-12-24

一　微信小程序案例(原创)

二　什么是微信

微信（WeChat）是腾讯公司于2011年1月21日推出的一个为智能终端提供即时通讯服务的免费应用程序，由张小龙所带领的腾讯广州研发中心产品团队打造。微信支持跨通信运营商、跨操作系统平台通过网络快速发送免费（需消耗少量网络流量）语音短信、视频、图片和文字，同时，也可以使用通过共享流媒体内容的资料和基于位置的社交插件“摇一摇”、“漂流瓶”、“朋友圈”、”公众平台“、”语音记事本“等服务插件。
截止到2016年第二季度，微信已经覆盖中国 94% 以上的智能手机，月活跃用户达到 8.06亿，用户覆盖 200 多个国家、超过 20 种语言。此外，各品牌的微信公众账号总数已经超过 800 万个，移动应用对接数量超过 85000 个，广告收入增至36.79亿人民币，微信支付用户则达到了 4 亿左右。
微信提供公众平台、朋友圈、消息推送等功能，用户可以通过“摇一摇”、“搜索号码”、“附近的人”、扫二维码方式添加好友和关注公众平台，同时微信将内容分享给好友以及将用户看到的精彩内容分享到微信朋友圈。
2018年4月1日起，微信静态条码支付，每天限额500元。

微信网址：

https://weixin.qq.com/

三　申请微信账号

进入微信网站：

注册小程序账号：

选择小程序账号：

注册相关信息：

扫码进入：

无论是小程序开发者还是利用第三方开发工具，需要使用小程序APPID

四　安装开发工具

五　微信开发初步

１创建微信小程序

创建项目：复制对应的APPID

２介绍界面

模拟器：可以利用不同的模拟器模拟微信项目

网络：可以通过不同的网络模拟微信项目

３文件类型

新建好一个微信小程序工程后，会发现其有四种文件类型，分别是：

js -------- 脚本文件：页面的交互逻辑均在此页面中进行

json ------ 配置文件：用于设置程序的配置效果

wxml ---- 页面结构文件：书写控件，构建页面

wxss ----- 样式文件：类似于css样式，用于美化页面

４微信布局方式

布局：弹性盒子

５相关代码

index.wxml:

<!--index.wxml-->
<view class="container">
  <view class='head'>
    <text class='txt1'>
      万和
    </text>
    <text class='txt1'>
      http://www.wanho.net
    </text>
  </view>
  <view class="logo">
    <image src='images/logo1.jpg'></image>
  </view>
  <view class="main">
    <view class="course">
        <text class='courseTxt'>就业课程</text>
        <view class='innermain'>
          <view class='imgs'>
            <image src='images/ico1.png'></image>
            <text class="img1">前端开发</text>
          </view>
           <view>
            <image src='images/ico2.png'></image>
            <text class="img1">UI设计师</text>
          </view>
           <view>
            <image src='images/ico3.png'></image>
            <text class="img1">软件开发</text>
          </view>
        </view>
    </view>
    <view class="course">
     <text class='courseTxt'>认证课程</text>
        <view class='innermain'>
          <view class='imgs'>
            <image src='images/ico1.png'></image>
            <text class="img1">前端开发</text>
          </view>
           <view>
            <image src='images/ico2.png'></image>
            <text class="img1">UI设计师</text>
          </view>
           <view>
            <image src='images/ico3.png'></image>
            <text class="img1">软件开发</text>
          </view>
        </view>
    </view>
  </view>
</view>

index.wxss

/**index.wxss**/
.container{
  display: flex;
  flex-direction: column;
}
.container .head{
  height: 60rpx;
  background: #C91E27;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.head .txt1{
  margin-top:-45rpx;
  color: white;
}
.logo{
  width: 100%;
  margin-top:80rpx;
}
.logo image{
  width: 100%;
  height:250rpx;
}
.courseTxt{
  display: flex;
  height: 80rpx;
  background: #DBDBEA;
  width: 100%;
  justify-content: flex-start;
  padding-left: 30rpx;
  line-height: 80rpx;
}
.innermain{
  margin-top: 60rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
   margin-bottom: 160rpx;
}
.innermain image{
  width: 100%;
  height: 150%;
}

６编译预览

点击工具上的编译按钮，可以在工具的左侧模拟器界面看到这个小程序的表现，也可以点击预览按钮，通过微信的扫一扫在手机上体验你的第一个小程序。

这次就写到这儿,下次我们利用springboot提供后台数据！

源码、更多资深讲师相关课程资料、学习笔记请入群后向管理员免费获取，更有专业知识答疑解惑。入群即送价值499元在线课程一份。 QQ群号：604697610 敲门砖（验证信息）：碧海蓝天