微信小程序入门指南

前言#

最近帮同学做了个微信小程序，记录一下学习过程，希望能对大家有帮助。

注册微信小程序#

如果想要开发微信小程序，前提是需要注册小程序账号，小程序注册，很容易注册，用邮箱即可

创建小程序#

1 代码组成#

1
├── app.js               // 小程序项目入口文件
2
├── app.json             // 小程序全局配置文件
3
├── app.wxss             // 小程序全局样式文件
4
├── components           // 小程序组件
5
│   └── navigation-bar
6
│       ├── navigation-bar.js
7
│       ├── navigation-bar.json
8
│       ├── navigation-bar.wxml
9
│       └── navigation-bar.wxss
10
├── pages                // 所有的小程序页面
11
│   └── index
12
│       ├── index.js    // 当前页面逻辑
13
│       ├── index.json  // 当前页面配置
14
│       ├── index.wxml  // 当前页面模板结构
15
│       └── index.wxss  // 当前页面样式
16
├── project.config.json  // 项目配置文件
17
├── project.private.config.json
18
└── sitemap.json         // 配置小程序及其页面是否允许被微信索引

页面需手动在app.json注册，否则不能访问
pages数组第一项代表小程序初始页面，减少需删除对应文件夹
直接修改this.data无效，无法改变页面状态，需要使用this.setData({})
tabBar最多设置 5 个
没有a标签，无法嵌套iframe，直接使用 wx.navigateTo()实现跳转
没有window对象，提供wx全局方法集

1.1 主体#

app.js 注册全局变量或方法，可以被所有页面获取到
app.json 小程序配置 pages 组成页面 window 设置状态栏、标题栏、导航条、窗口背景 - - - tabBar 配置 tab 栏样式和对应页面
app.wxss 小程序公共样式表可引入其他.wxss 文件

app.json示例：

1
"pages": [ //设置页面的路径
2
  "pages/index/index", //不需要写index.wxml,index.js,index,wxss,框架会自动寻找并整合
3
  "pages/logs/logs"
4
],
5
"window": { //设置默认窗口的表现形式
6
  "navigationBarBackgroundColor": "#ffffff", //顶部导航栏背景色
7
  "navigationBarTextStyle": "black", //顶部导航文字的颜色 black/white
8
  "navigationBarTitleText": "微信接口功能演示", //顶部导航的显示文字
9
  "backgroundColor": "#eeeeee", //窗口的背景色
10
  "backgroundTextStyle": "light", //下拉背景字体、loading 图的样式，仅支持 dark/light
11
  "enablePullDownRefresh": "false", //是否支持下拉刷新 ，不支持的话就直接不写！
12
  "disableScroll": true, //  设置true不能上下滚动，true/false，注意！只能在 page.json 中有效，无法在 app.json 中设置该项。
13
},
14
"tabBar": { //底部tab或者顶部tab的表现，是个数组，最少配置2个，最多5个
15
  "list": [{ //设置tab的属性，最少2个，最多5个
16
    "pagePath": "pages/index/index", //点击底部 tab 跳转的路径
17
    "text": "首页", //tab 按钮上的文字
18
    "iconPath": "../img/a.png", //tab图片的路径
19
    "selectedIconPath": "../img/a.png" //tab 在当前页，也就是选中状态的路径
20
  }, {
21
    "pagePath": "pages/logs/logs",
22
    "text": "日志"
23
  }],
24
  "color": "red", //tab 的字体颜色
25
  "selectedColor": "#673ab7", //当前页 tab 的颜色，也就是选中页的
26
  "backgroundColor": "#2196f3", //tab 的背景色
27
  "borderStyle": "white", //边框的颜色 black/white
28
  "position": "bottom" //tab处于窗口的位置 top/bottom
29
  },
30
"networkTimeout": { //默认都是 60000 秒一分钟
31
    "request": 10000, //请求网络超时时间 10000 秒
32
    "downloadFile": 10000， //链接服务器超时时间 10000 秒
33
      "uploadFile": "10000", //上传图片 10000 秒
34
    "downloadFile": "10000" //下载图片超时时间 10000 秒
35
  },
36
"debug": true //项目上线后，建议关闭此项，或者不写此项

1.2 pages#

小程序的各个页面，由.wxml、.wxss、.js、.json组成

.js指定页面初始数据、生命周期、事件处理
.wxml页面布局，只能使用微信定义的组件
.wxss样式表，rpx可以根据屏幕宽度自适应、@import导入外部样式
.json页面配置文件

1.3 utils#

公共代码抽取的js文件，作为模块使用，通过module.export对外暴露，使用const utils = require('../../utils/util.js')阴用

1.4 project.config.json#

2 视图层 WXML#

wxml 对比 html#

html：div、span、img、a wxml：view、text、image、navigator

2.1 数据绑定#

状态模式—单向数据流，即数据流向是单向的，视图变化不会影响对象状态

视图上的数据必须通过事件传递给对象，只有用户操作视图，才能获取到数据，并更新对象状态

.wxml动态数据绑定

1
Page({
2
  data: {
3
    message: 'Hello',
4
    id: 0,
5
    status: true,
6
  },
7
})

1
<view> {{message}} </view>
2
<view id="item-{{id}}"> </view>
3
<view wx:if="{{status}}"> </view>
4
<view hidden="{{status}}"> </checkbox>

还可以进行简单的运算

1
<view hidden="{{status ? true : false}}"> Hidden </view>
2
<view> {{a + b}} + c </view>
3
<view wx:if="{{num > 6}}"> </view>
4
<view>{{"hello" + word}}</view>

2.2 条件渲染#

1
<view wx:if="{{num > 5}}"> A </view>
2
<view wx:elif="{{num > 2}}"> B </view>
3
<view wx:else> C </view>

2.3 列表渲染#

1
<view wx:for="{{array}}" wx:key="index">
2
  {{index}}: {{item.message}} // 默认数组下标变量为index，当前项变量为item
3
</view>

2.4 模板 template#

name定义组件模板名称，引用模板使用is属性指定，is 可以进行简单的三目运算

模板有自己作用域，只能通过data传入数据

1
<template name="msgItem">
2
 <view>
3
        <text> {{index}}: {{msg}} </text>
4
        <text> Time: {{time}} </text>
5
 </view>
6
</template>
7

8
<!-- 其他代码 -->
9
<template is="msgItem" data="{{...item}}"/>

2.5 公共模板引用#

2.6 事件#

名称以bind开头的事件不阻止冒泡，名称以catch开头事件阻止冒泡

在wxml中，使用dataset定义data数据，会通过事件传递

3. 事件周期#

3.1 APP()应用生命周期#

用户首次打开小程序，触发onLaunch
小程序初始化完成，触发onShow，监听小程序显示
小程序从前台进入后台，触发onHide方法
小程序从后台进入前台，触发onShow方法
小程序后台运行一定时间，或系统资源占用过高，会被销毁。
小程序出错，触发onError

1
App({
2
  onLaunch: function () {
3
    //小程序初始化(全局只触发一次)
4
  },
5
  onShow: function () {
6
    //小程序显示
7
  },
8
  onHide: function () {
9
    //小程序隐藏
10
  },
11
  onError: function (msg) {
12
    //小程序错误
13
  },
14
})
15
//其他 开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问

3.2 Page 页面生命周期#

每个页面有自己生命周期

注册完成后，加载页面，触发onLoad方法
页面载入后触发onShow方法，显示页面
首次显示页面，触发onReady方法，渲染页面元素和样式，一个页面之后调用一次
当后台运行或者跳转到其他页面，触发onHide方法
重新进入页面，触发onShow方法
当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload

1
Page({
2
  onLoad: function (options) {
3
    //页面加载-----(一个页面只会调用一次)
4
  },
5
  onReady: function () {
6
    //页面渲染-----(一个页面只会调用一次)
7
  },
8
  onShow: function () {
9
    //页面显示-----(每次打开页面都会调用一次)
10
  },
11
  onHide: function () {
12
    //页面隐藏-----(当navigateTo或底部tab切换时调用)
13
  },
14
  onUnload: function () {
15
    //页面卸载-----(当redirectTo或navigateBack的时候调用)
16
  },
17
})
18
//其他 开发者可以添加任意的函数或数据到 object 参数中，在页面的函数中用 this 可以访问

3.3 应用生命周期影响页面生命周期#

小程序初始化完成后，页面首次加载触发onLoad，只会触发一次。
当小程序进入到后台，先执行页面onHide方法再执行应用onHide方法。
当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法

4 小程序限制#

4.1 程序限制#

样式不支持级联选择器
本地资源无法通过 css 获取 background-image可以使用网络图片，或者 base64，或者使用标签
不支持 A 标签，无法打开普通网页

4.2 数量限制#

底部或顶部可以添加tab按钮区域 tabBar 是一个数组，只能配置最少 2 个、最多 5 个 tab，tab按数组的顺序排序
一个应用同时只能打开 5 个页面
小程序的wx.request请求最开始最大并发数是 10 个

4.3 大小限制#

tabBar上按钮iconPath图片路径、selectedIconPath选中图片路径，icon 大小限制为40kb
setData页面数据传递单次设置数据不能超过1024kb
setStorage本地缓存最大10mb
小程序源码打包后大小限制2m

5 路由#

微信路由接口有三个，分别是wx.redirectTo、wx.navigateTo和wx.switchTab wx.navigateTo全局最多调用 5 次
如果某页面设置为tab页，则只支持wx.switchTab，不支持其他两种路由方式访问

5.1 触发页面跳转#

小程序启动，初始化第一个页面
打开新页面，调用 APIwx.navigateTo 或使用<navigator />组件
页面重定向，调用 APIwx.navigateTo 或使用<navigator />组件
页面返回，调用 API wx.navigateBack或用户按左上角返回按钮
tarbar切换

5.2 如何跳转页面#

1
wx.navigateTo({ // 原页面会保留
2
  //目的页面地址
3
  url: 'pages/logs/index',
4
  success: function(res){},
5
  ...
6
})
7

8
wx.redirectTo({ // 关闭原页面 不能返回
9
  //目的页面地址
10
  url: 'pages/logs/index',
11
  success: function(res){},
12
  ...
13
})

5.3 使用组件#

1
<navigator url="pages/logs/index" hover-class="navigator-hover">跳转</navigator>

添加redirect属性，等同于wx.redirectTo接口，默认redirect为false，等同于wx.navigateTo接口

1
wx.navigateBack({
2
  delta: 1,
3
})

delta为 1 时返回上一页，为 2 时表示上上一页。如果dalta大于已打开的页面总数，则返回到首页

5.4 页面跳转传值#

1
url?key=value&key1=value1 传递的参数没有被URIEncode,传递中文没有乱码

5.5 如何正确使用页面跳转#

对于可逆操作，使用wx.navigateTo,比如从首页跳转到二级页面，从二级页面返回是不需要重新渲染首页
对于不可逆操作，使用wx.redirectTo,比如用户登录成功后，关闭登录页面，不能返回到登录界面。
对于一些介绍性等不常用页面wx.redirectTo或wx.navigatrBack
不要在首页使用wx.redirectTo，这样会导致应用无法返回首页

5.6 页面栈#

小程序提供了getCurrentPages()函数获取页面栈，第一个元素为首页，最后一个元素为当前页面
使用wx.navigateTo重复打开页面，会在页面栈顶部添加一个与二级页面初始状态一样的界面，两个页面状态独立，页面栈大小加 1
使用wx.redirectTo重定向，关闭当前页面，使用新页面替换当前页面，两个状态是独立的
使用wx.navigateBack返回，页面栈减 1

6 数据通信#

6.1 页面之间通信#

使用全局变量app.globalData
使用本地缓存wx.setStorageSync
url传递

1
// A页面-传递数据
2

3
// 需要注意的是，wx.switchTab 中的 url 不能传参数。
4
wx.navigateTo({
5
  url: '../pageD/pageD?name=raymond&gender=male',
6
})
7

8
// B页面-接收数据//
9

10
//通过onLoad的option...
11

12
Page({
13
  onLoad: function (option) {
14
    console.log(option.name + 'is' + option.gender) // raymond is male
15
    this.setData({ option: option })
16
  },
17
})

6.2 参数传递#

6.2.1 小程序传递参数方式#

通过在App.js中设置全局变量

1
// 通常把不会更改的数据放在app.js的Data中，在各个页面中都可以通过APP实例获取Data数据
2
var app = getApp()
3
var data = app.data

通过拼接 URL 直接传递

1
// 1.通过wx.navigateTo携带参数
2
wx.navigateTo({
3
  url: 'test?id=1'
4
});
5
// 获取
6
onLoad (options) {
7
 const id = options.id
8
}
9

10

11
// 2.通过navigator跳转url传递参数
12
<navigator url="../../pages/test/test?testId={{testData.testId}}"></navigator>
13
// 如果传递为数组
14
<navigator url="../../pages/test/test?albumList={{testData.albumList}}"></navigator>
15
// 传递到js后从options中得到的是个字符串，每个图片的url通过','分隔，所以要对其进行处理
16
Page({
17
    data: {
18
        albumList: [],
19
    },
20
    onLoad: function (options) {
21
        var that = this;
22
        that.setData({
23
            albumList: options.albumList.split(",")
24
        });
25
    }
26
})

在wxml中绑定事件后，通过data-xx=“xx”的方式传递

1
<view bindtap="clickMe" data-testId={{testId}}">
2
    ...
3
</view>

在js页面自定义方法clickMe接收

1
Page({
2
  clickMe: function (event) {
3
    var testId = event.currentTarget.dataset.testid
4
    wx.navigateTo({
5
      url: '../../pages/test/test',
6
    })
7
  },
8
})

wxml中配置传递数组

1
<view bindtap="clickMe" data-albumlist={{testData.albumList}}">
2

3
</view>

在js中自定义clickMe接收

1
在js页面中自定义方法clickMe中接收
2

3
Page({
4
  clickMe: function (event) {
5
    var albumList = event.currentTarget.dataset.albumlist.split(',')
6
    wx.navigateTo({
7
      url: '../../pages/test/test',
8
    })
9
  },
10
})

通过数据缓存存储在读取

1
// wx.setStorageSync 存储数据
2
try {
3
  wx.setStorageSync('key', 'value')
4
} catch (e) {}
5
// wx.getStorageSync(key) 读取数据
6
try {
7
  const value = wx.getStorageSync('key')
8
  if (value) {
9
    console.log(value)
10
  } else {
11
  }
12
} catch (e) {}
13
// 或者
14
wx.getStorage({
15
  key: 'key',
16
  success: function (res) {
17
    console.log(res.data)
18
  },
19
})

7 疑难汇总#

不能使用 window 等对象；zepto/jquery无法使用

1
页面逻辑执行在JsCore中，jsCore是一个没有窗口对象的环境

本地资源无法通过css获取

1
background-image：可以使用网络图片，或者 base64，或者使用<image/>标签

修改窗口背景色

1
page {
2
  display: block;
3
  min-height: 100%;
4
  background-color: red;
5
}

小程序组件

使用遇到的问题#

使用微信地图组件报错 getLocation:fail the api need to be declared in the requiredPrivateInfos field in app.json/ext.json

使用地理位置相关接口时，需要声明该字段requiredPrivateInfos
https://xxx.com 不在以下 request 合法域名列表中，请参考文档：网络配置

每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信。
- 开发环境需要配置
  develop-origin-error
- 生产环境配置
  production-origin-error

请求#

wx.request

预览效果#

代码包太大，影响预览

-->

预览真机调试区别

预览只能看，真机调试可改代码

审核#

-->

音乐

音乐