一.开发前准备

1.注册账号

如果还没有微信公众平台的账号，先进入微信公众平台首页，点击 “立即注册” 按钮进行注册。注册的账号类型选择 “小程序” 即可。接着填写账号信息，需要注意的是，
填写的邮箱必须是未被微信公众平台注册、未被个人微信号绑定的邮箱，而且每个邮箱仅能申请一个小程序。激活邮箱之后，选择主体类型为 “个人类型”，并按要求登记主体信息。
主体信息提交后不可修改，该主体将成为你使用微信公众平台各项服务和功能的唯一法律主体与缔约主体，在后续开通其他业务功能时不得变更或修改。

2.获取id

登录微信公众平台 —> 开发 —> 开发设置
image.png

3.下载安装开发工具

微信小程序开发工具下载地址
官方开发文档

二.开发工具使用

1.创建新的项目

2.微信小程序开发工具功能菜单

3.微信小程序调试期支持http

微信小程序需要https请求，(没有https证书的可以再调试时设置支持http)

4.微信小程序添加编译模式

微信小程序开发工具通过添加编译模式可以针对于某一个特定的页面进行编译。

5.微信小程序内测人员添加

三.小程序的目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
├── components (公共组件目录)
│   ├── @anima (动画组件)
│   └── ...
├── images（公共图片）
│   └── icon
│      ├── icon@download.png
│      └── icon@cancel.png
├── pages（主包目录）
│   └── home (app.json 设置的入口页)
│       ├── home.wxml
│       ├── home.js
│       ├── home.json
│       └── home.wxss
├── style（公用样式目录）
├── subpackages（分包目录）
│   │── news
|   └── store
├── utils（公共模块，工具类）
│   ├── config.js（项目配置）
│   └── local.config.js (本地配置，git忽略)
├── .editorconfig
├── .gitignore
├── app.js
├── app.json
├── app.wxss
├── project.config.json

1.pages目录结构

pages: 页面文件.包含一个页面所需的所有文件

  1. js文件为逻辑控制层。
  2. wxml文件为页面展示层(类似于xml)。
  3. wxss文件为样式层(类似于css)。
(1.)page.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Page({
  data: {text: "This is page data."},                           //页面的初始数据
  onLoad: function(options) {  },                               //生命周期回调—监听页面加载
  onReady: function() {  },                                     //生命周期回调—监听页面初次渲染完成
  onShow: function() {  },                                      //生命周期回调—监听页面显示
  onHide: function() {  },                                      //生命周期回调—监听页面隐藏
  onUnload: function() {  },                                    //生命周期回调—监听页面卸载
  onPullDownRefresh: function() {  },                           //监听用户下拉动作
  onReachBottom: function() {  },                               //页面上拉触底事件的处理函数
  onShareAppMessage: function () {  },                          //监用户点击右上角转发
  viewTap: function() {                                         //如下为自定义的事件处理函数（视图中绑定的）
    this.setData({text: 'Set some data for updating view.'})    //setData设置数据绑定data值，同时将更新视图
  }
})

data 是页面第一次渲染使用的初始数据。

页面加载时，data 将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。渲染层可以通过 [WXML]对数据进行绑定。
示例代码：

1
2
<view>{{text}}</view>
<view>{{array[0].msg}}</view>
1
2
3
4
5
6
Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})
(2.)微信小程序界面WXML

对于微信小程序而言，视图层就是所有.wxml文件与.wxss文件的集合。微信小程序在逻辑层将数据进行处理后发送给视图层展现出来，同时接受视图层的事件反馈。WXML是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建出页面的结构，即.wxml文件。

1
2
3
4
5
6
7
8
9
10
11
12
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>
(3.)微信小程序界面wxss样式

wxss( WeiXin Style Sheets ) 是一套样式语言，用来决定 WXML 的组件应该怎么显示，wxss 具有 css 大部分特性，wxss 对 css 进行了扩充以及修改，以适应微信小程序的开发
wxss 与 css 相比，wxss扩展的特性有：

  • 尺寸单位
  • 样式导入
    样式的三种写法:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    页面样式的三种写法：（1）行内样式、（2）页面样式 page.wxss、（3）全局样式 app.wxss。都可以作用于页面的组件

    <!--1.行内（内联）样式-->
    <view style='color:red; font-size:32px'>测试</view>    <!--样式：键值对的形式-->
     
    <!--2.页内样式-->
    <view class='box'>测试</view>    <!--通过类选择器.box{}，到page.wxss中写样式-->
     
    <!--3.全局样式-->
    <view class='container'>测试</view>    <!--通过类选择器.container，到app.wxss中写样式-->
    如果有相同的样式，优先级依次是：行内样式 > 页面样式 > 全局样式。

常用css选择器:

选择器 样例 样例描述
.class .intro 选择所有拥有 class=”intro” 的组件
#id #firstname 选择拥有 id=”firstname” 的组件
element view 选择所有 view 组件
例如:
.wxml 
1
2
3
<text>hello</text>
<view id="idStyle"></view>
<view class="classStyle"></view>

.wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 类选择器 */
.classStyle{
  
    padding: 20px;
	background-color: #2980B9;/*深蓝色*/
}
/* id选择器 */
#idStyle{
    margin-top: 50px;
    width: 50px;
    margin: 50px;
    height: 50px;
    background-color: blueviolet
}
/* 元素选择器 */
text{
    color:red;
    background-color:blue
}

2.app.js文件

app.js文件为程序初始化话文件(相当于Android中的application)。

1
2
3
4
5
6
7
App({                                   //如下为小程序的生命周期
  onLaunch: function() { },             //生命周期回调——监听小程序初始化。
  onShow: function() {  },              //生命周期回调——监听小程序启动或切前台。
  onHide: function() {  },              //生命周期回调——监听小程序切后台。
  onError: function(msg) {  },          //错误监听函数。
  onPageNotFound:function() {  }        //页面不存在监听函数。
})

3.app.json 文件

app.json可以对小程序全局配置
image.png

四.小程序组件

微信小程序提供了许多的视图，如view，button，input等(详见微信小程序开发者文档)，由这些组件堆砌成视图页面。

1.view标签(类似 div)

小程序提供了常用的标签组件用于构建页面:

1
2
3
4
5
6
7
<view hover-class="h-class">
  点击我试试
  </view>
  <!-- wxss -->
  .h-class{
    background-color: yellow;
  }

2.text标签

显示普通的文本 text只能嵌套text:

1
2
3
<text selectable="{{false}}" decode="{{false}}">
   测试
</text>

3.image标签

图片标签:

1
2
<image class="widget__arrow" src="/image/xxx.png" mode="aspectFill">
</image>

mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

4.video标签

视频标签。该组件是原生组件，使用时请注意相关限制:

1
<video src="{{src}}" controls></video>

5.微信小程序模板组件

(1.)创建一个文件夹专门用于存放template文件

(2.)新建.wxml文件和.wcss文件

template.wxml:

1
2
3
4
5
6
7
8
<!-- 模板文件的命名要注意 -->
<template name="demo">
  <view class='tempDemo'>
    <!-- 传递过来的数据名字要和传递的地方一致 -->
    <text class="name">name:{{item.name}}</text>
    <text class="click" bindtap="clickMe" data-name="{{item.name}}">点击</text>
  </view>
</template>

template.wcss:

1
2
3
4
5
6
7
8
9
10
11
12
13
.tempDemo {
  width: 100%;
}

.name {
  color: darkorange;
}

.click {
  color: red;
  position: absolute;
  right: 10rpx;
}
(3.)在页面的.wxml文件和.wxss文件中引用模板文件page.js文件监听事件

page.wxml:

1
2
3
4
5
6
7
8
9
10
<!-- 导入模板 -->
<import src="../../template/template.wxml" />
<!-- 嵌入模板 -->
<view>
  <text>嵌入模板</text>
  <view wx:for="{{data}}" wx:key="{{item}}">
    <!-- 传入参数，必须是对象 -->
    <template is="demo" data='{{item}}'></template>
  </view>
</view>

page.wxss:

1
@import "../../template/template.wxss"

page.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Page({
  data: {
  },
  onLoad: function () {
    let names = [{ name: '马云' },
    { name: '马化腾' },
    { name: '李彦宏' }]
    this.setData({
      data: names,
    })
  },
  clickMe: function (event) {
    console.log(event.currentTarget.dataset.name)
  }
})
(4.)属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：
1
2
3
4
5
6
7
8
9
10
<template name="odd">
  <view>odd</view>
</template>
<template name="even">
  <view>even</view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}" />
</block>

6.微信小程序自定义组件

  1. 新建组建。
  2. 引入组件。
  3. 引用组件。

五.小程序页面数据绑定和事件绑定

1.数据绑定

注意:单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
示例代码：
.wxml:

1
2
<!-- {{}}里面的数据则是绑定的数据 -->
<view>{{text}}</view>

.js:

1
2
3
4
5
6
7
8
9
10
11
Page({
  data: {
    text: 'hello',
  },
  onLoad: function() {
   //设置数据
    this.setData({
      text:'hello wechat'
    })
  },
})

2.事件绑定

框架的核心是一个响应的数据绑定系统，可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。
.wxml:

1
2
3
<view>{{name}}</view>
<!-- 绑定点击的方法名 -->
<button bindtap="changeNameClick">点击我</button>

.js:

1
2
3
4
5
6
7
8
9
10
11
12
Page({
  data: {
    name: 'wechat',
  },
  onLoad: function() {},
  //wxml里面绑定的事件
  changeNameClick(e) {
    this.setData({
      name: 'hello-wechat'
    })
  }
})

六.小程序页面尺寸单位

尺寸单位：rpx（responsive pixel）：可以根据屏幕宽度进行自适应，以达到不同机型适配的效果，规定屏幕宽为 750rpx。如在 iPhone6 上，屏幕宽度为375px，共有 750个 物理像素，
则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。

设备 rpx换算px（屏幕/750） px换算rpx（750/屏幕宽度）
iPhone5 1rpx=0.42px 1px=2.34rpx
iPhone6 1rpx=0.5px 1px=2rpx
iphone5 Plus 1rpx=0.552px 1px=1.81rpx