原生微信小程序开发简明教程

[yanyue404]

目录

• 1.生命周期
• 2.路由
• 3.重要组件
• 4.数据交互
• 5.授权登录与用户信息
• 6.调试
• 7.周边
• 8.参考链接

生命周期

App

// app.js
App({
  onLaunch(options) {
    // 小程序初始化启动时先做一些事情，如：扩展 wx 对象
  },
  onShow(options) {
    // 小程序启动，或从后台进入前台显示时触发
  },
  onHide() {
    // 小程序从前台进入后台时触发
  },
  onError(msg) {
    // 小程序发生脚本错误或 API 调用报错时触发
  },
  globalData: 'I am global data',
});

Page

Page({
  data: {
    text: 'This is page data.',
  },
  onLoad: function (options) {
    // 页面创建时执行，一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数
  },
  onShow: function () {
    // 页面显示/切入前台时触发
  },
  onReady: function () {
    // 页面首次渲染完毕时执行，一个页面只会调用一次，代表页面已经准备妥当（可以操作 Dom）
   // ! 如果需要获取 ajax 动态渲染的 dom 元素，可以在获取数据后设置 setData 时的回调中获取
  },
  onHide: function () {
    // 页面从前台变为后台时执行
  },
  onUnload: function () {
    // 页面销毁时执行
  },
  onPullDownRefresh: function () {
    // 触发下拉刷新时执行
  },
  onReachBottom: function () {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function () {
    // 页面滚动时执行
  },
});

Component

Component({
  // 在组件中是否使用全局 css 样式
  options: {
    addGlobalClass: true,
  },
  // 组件的属性列表（从父接收）
  properties: {
    paramA: Number,
    paramB: String,
  },
  data: {
    text: 'This is page data.',
  },
  created() {
    // 在组件实例刚刚被创建时执行，注意此时不能调用 setData
  },
  attached() {
    //  在组件实例进入页面节点树时执行
  },
  ready() {
    // 在组件布局完成后执行
  },
  detached() {
    // 在组件实例被从页面节点树移除时执行
  },
  methods: {
    // 事件响应函数
    viewTap: function () {
      // ...
    },
  },
});

路由

跳转到其他页面

// 跳转至非 tabbar 页面（ 保留当前页面，可以返回到本页面）
wx.navigateTo({
  url: '../articleDetail/articleDetail?id=7',
});

// 关闭当前的页面再跳转，不可返回
wx.navigateTo({
  url: `../mediaCoverage_detail/mediaCoverage_detail?id=${data.id}`,
});

// 关闭所有页面，打开到应用内的某个页面(支持所有页面)
wx.reLaunch({
  url: '../sort/sort',
});

//跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.switchTab({
  url: '../whereCanSearch/whereCanSearch',
});

返回页面

// 返回上一页
wx.navigateBack({ delta: 1 });

页面栈

getCurrentPages();

Page({
  click_address() {
    let pages = getCurrentPages(); // 获取页面栈
    let current = pages[pages.length - 1]; // 当前页面
    let url = current.route; //当前页面url
    let options = current.options; //如果要获取url中所带的参数可以查看options
    let prevpage = pages[pages.length - 2]; // 上一个页面
    let data = prevpage.data; // 获取上一页data里的数据
    if (prevPage) {
      //存在上一页
      prevPage.changeDataPageA('load'); // 调用上一页的函数
      prevPage.setData({ address_id: id }); // 修改上一页的数据
      wx.navigateBack(); // 返回上一页
    }
  },
});

重要组件

布局元素

• image
• view，text
• picker
• video

开放能力

web-view

承载网页的容器。会自动铺满整个小程序页面。

配置：src 属性 为webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。
调试：微信开发者工具最新版本， 在web-view页面点击鼠标右键可出现调试按钮。
其他接口：

• web-view网页中可使用JSSDK 1.3.2提供的接口返回小程序页面，支持大部分路由接口。
• web-view网页中仅支持部分JSSDK接口。
• 用户分享时可获取当前web-view的URL，即在onShareAppMessage回调中返回webViewUrl参数。

数据交互

模板

（1）动态 class

<view
  wx:for="{{mediaData}}"
  class="coverageBox {{(index < mediaData.length -1) ? 'border_bottom':'' }}"
  data-index="{{index}}"
></view>

（2）列表渲染

wx:for 控制属性绑定一个数组，默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName" wx:key="id">
  {{idx}}: {{itemName.message}}
</view>

（3）条件渲染

wx:if，来判断是否需要渲染该代码块：

<view wx:if="{{condition}}">True</view>

也可以用 wx:elif 和 wx:else 来添加一个 else 块：

<view wx:if="{{length > 5}}">1</view>
<view wx:elif="{{length > 2}}">2</view>
<view wx:else>3</view>

block wx:if

是一个包装元素，并不会展示。如果要一次性判断多个组件标签，可以使用 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view>view1</view>
  <view>view2</view>
</block>

wx:if vs hidden

频繁切换：用 hidden，逻辑切换：用 wx:if，类似于 v-if 与 v-show。

<view hidden="{{true}}">show</view>

setData

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

this.setData(
  {
    text: 'changed data',
  },
  function () {
    // setData引起的界面更新渲染完毕后的回调函数
  },
);

 changeItemInArray() {
    // 对于对象或数组字段，可以直接修改一个其下的子字段，这样做通常比修改整个对象或数组更好
    this.setData({
      'array[0].text': 'changed data'
    })
  },
  changeItemInObject() {
    this.setData({
      'object.text': 'changed data'
    })
  },

跨页面传值

• onLoad 的参数中获取打开当前页面路径中的参数。
• app.globalData
• wx.Storage
• 组件 triggerEvent(eventName, detail)

授权登录与用户信息

获取用户信息（昵称、头像等）

获取用户信息有两种方式。一种是通过 wx.getUserInfo() ，静默获取用户信息，但是需要用户之前授过权，否则拿不到信息。另一种方式是通过微信开放能力，通过 <button class="agree-btn" open-type="getUserInfo" bindgetuserinfo="onGotUserInfo">微信授权登录</button> 的方式由用户主动触发，一定能拿到用户信息（昵称、头像、性别、地区..）。

登录凭证

前端开发者调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。开发者服务器接收到 code，结合 appid、appsecret，通过后台服务调用 auth.code2Session 接口，换取 用户唯一标识 OpenID 和 会话密钥 session_key，如果用户已满足 UnionID 下发条件的情况下会返回开放平台唯一标识 unionId。（UnionID 机制说明）

之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。

注意：

• 会话密钥 session_key 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全，开发者服务器不应该把会话密钥下发到小程序，也不应该对外提供这个密钥。
• 临时登录凭证 code 只能使用一次

获取手机号

通过微信开放能力 <button class="agree-btn" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">授权绑定手机号</button> 获取到加密数据 encryptedData 和初始向量 iv，后端结合 session_key 可 解密出手机号。

注意：

在回调中调用 wx.login 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login 刷新登录态。

调试

开发者工具

（1）断点调试

打开调试器工具，按下快捷键 contrl+p，输入搜索的文件名，例如：home.js，而后打断点进行调试。

（2）真机调试

（3）自定义编译

scene 扫码的参数可以使用 escape 加密， unescape 解析。

{
  "file": "project.config.json",
  "miniprogram": {
    "current": -1,
    "list": [
      {
        "id": -1,
        "name": "首页分享给代理人 yanyue404",
        "pathName": "pages/auth_login/auth_login",
        "query": "homePage=true&accountId=172",
        "scene": null
      },
      {
        "id": -1,
        "name": "点亮星星扫码进入代理人",
        "pathName": "pages/auth_login/auth_login",
        "query": "scene=a%3D172%26t%3Dhome_foreign",
        "scene": ""
      }
    ]
  }
}

query 解密 （escape）	query 加密（unescape）
"query": "scene=a=172&t=personalCard"	"query": "scene=a%3D172%26t%3DpersonalCard"

（4）弱网调试

借助调试器 Network 选项，可选择Fast 3G网络进行调试。

真机

以下的方法都借助 vConsole:

（1）体验版调试

点击右上角...图标，开启调试模式，查看 vConsole 输出面板。

建议将所有的请求都进行打印：

// 成功日志输出
console.log('Request Successful', {
  url,
  params,
  result,
});

// 失败日志输出
console.log('Request Error', {
  url,
  params,
  result,
});

（2）线上版本调试

先在体验版或开发版打开调试，再切到正式版就能看到 vConsole。

周边

• taro - 多端开发框架
• ColorUI - 鲜亮的高饱和色彩，专注视觉的小程序组件库
• wxParse - 微信小程序富文本解析自定义组件，支持 HTML 及 markdown 解析
• wemark - 小程序中的 Markdown 渲染仓库
• vant-weapp - 轻量、可靠的小程序 UI 组件库
• demos-weChatApp - 微信小程序版知乎
• qjbike_wxapp - 🛴 仿改青桔单车小程序
• mini-github - GitHub WeChat Mini Program
• miniprogram-demo - 微信小程序组件 / API / 云开发示例
• awesome-github-wechat-weapp - 微信小程序开源项目库汇总

参考资料

• 微信官方文档 · 小程序
• 开放能力-用户信息-小程序登录
• 从零开始一个微信小程序版知乎
• 开发版 Nightly Build 微信开发者工具
  The text was updated successfully, but these errors were encountered: