小程序从入门到快速开发小程序项目

最新推荐文章于 2024-08-07 21:00:00 发布

唐城

最新推荐文章于 2024-08-07 21:00:00 发布

阅读量501

点赞数 3

文章标签：微信小程序小程序 Java

原文链接：https://blog.csdn.net/jay100500/article/details/81842283?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161639215016780265455300%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=161639215016780265455300&biz_id=0&utm_mediu

版权

一点唐城 | 微信小程序专栏收录该内容

12 篇文章 1 订阅

订阅专栏

备注：小程序只是突发灵感兴趣弄的，并非专业研究小程序，其实小程序API并不多，不复杂，扩展无非就是JS了。

最近用了大概两天左右的时间看了小程序的官方文档：https://mp.weixin.qq.com/cgi-bin/wx

然后有目标的进行实践，也就是要实现个你想要的小程序，这样边实践边学习才能够有疑问，才能够更快的理解和学习小程序开发。所以后续几天就开始小程序实践和学习之旅了，期间也遇到了一些问题并且学到了很多基础知识和解决方案。接下来给大家讲解下小程序的开发基本知识和扩展知识。

官方文档其实写的基本很详细了，我们先从工具开始说起。

1、小程序开发者工具。

这个工具集成了公众号网页调试和小程序调试两种开发模式。我这里使用了Beta版本，没有用正式版。因为我想体验使用其中的Git版本管理功能。下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/beta.html

下载安装好后，先要微信扫描登录。然后选择小程序项目。

新建小程序项目。

选择新建小程序的项目目录，AppID没有注册的话，可以先点击下面的使用测试号即可，不影响开发。

大致的工具界面如下图，新版有版本管理。红色圈起来的为小程序项目的一个页面包含的元素：

工具用起来很方便、简单、直接。详细用法就不说了，主要的功能大概说下。左侧是模拟器，可以模拟安卓手机和苹果手机的效果，因为有些小程序组件在安卓和苹果上显示是有区别的，大家可以注意下。圈红的为小程序一个页面的基本组成文件元素：xx.js、xx.wxml、xx.wxss、xx.json。其实就是有JS文件、HTML文件（xx.wxml）、CSS样式文件（xx.wxss）和配置文件（xx.json）组成，非常的容易理解。我们就是在使用小程序的组件、控件来绘制UI布局，主要是xx.wxml和xx.wxss文件。xx.js负责生命周期函数和事件处理，例如：点击事件、数据请求、数据绑定等等逻辑操作。

我们在编写完后，可以点击工具栏上的预览按钮，扫描二维码在真机上体验，也可以直接用左侧的模拟器时时预览即可。

看完了工具，我们看下基本开发的要素和需要注意的问题吧，以免新手再次重蹈覆辙。

看下默认的新建后的结构：

app.json是小程序全局配置文件，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

大致代码结构如下：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

pages是配置小程序所有页面，类似于注册清单。window是全局的窗口配置，如颜色、标题等等。当然每个页面也可以自己单独配置，就是页面名称.json文件。例如：page.json。不过需要注意的是，单独页面配置的json无需写window这个关键字，直接如下代码所示：

{
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#34495e",
  "navigationBarTitleText": "日记",
  "navigationBarTextStyle": "white",
  "enablePullDownRefresh": true,
  "backgroundColor": "#34495e"
}

那么再看工具配置文件project.config.json。

通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。具体详细配置大家可以看小程序官方文档有详细介绍。

还有一个app.wxss和app.js。这个app.wxss就是全局的样式文件，也就是css文件，当然和页面配置文件一样，每个页面可以单独写页面名称.wxss。

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。

提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

此外 WXSS 仅支持部分 CSS 选择器

再来看app.js，很明显是一个js文件。负责UI交互、数据绑定更新、网络请求、页面生命周期等等操作相关的都在这里。当然每个页面都有自己单独的.js文件，这个app.js可以做一些需要全局共享和操作的逻辑在里面。在这里可以调用微信小程序的很多API，也可以自己写js方法使用。

那么我们看下一个页面的组成，基本上就是下图这些结构元素。有界面、有样式、有js交互、有配置。

每新增一个页面都要在app.json里添加注册进去。

一个.js文件里有生命周期的管理函数，可以在这里面做相应的操作。

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

我们看下最简单的一个index.wxml页面，可以当做是Html页面，只有一个text控件，里面的bindtap就是点击事件的绑定。

<!--index.wxml-->
<view class="container">
  <view class="usermotto">
    <text class="user-motto" bindtap='click'>{{motto}}</text>
  </view>
</view>

那么这个class就是index.wxss里的样式文件。里面的{{motto}}就是指向index.js里的data里定义的一个变量。小程序都是通过{{..}}两个大括号包括一个英文名字来进行变量绑定的。这样我们就可以动态更换里面的显示内容了。那么怎么更新内容呢？

在js里使用下面的this.setData方式动态更新刷新数据：

this.setData({ motto: "名字" })

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
 
.userinfo-nickname {
  color: #aaa;
}
 
.usermotto {
  margin-top: 200px;
}

再看下index.

js文件。

//index.js
//获取应用实例
const app = getApp()
 
Page({
  data: {
    motto: 'Hello World',
  },
  
  //事件处理函数
  click: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
    
})

Page函数是必须要有的，里面包含data:{  ... }，用于放置数据、常量、变量等等。这里的click:function就是我们定义的点击事件。wx.navigateTo...方法就是小程序的官方API，具体其他API的用法和返回参数是什么可以看官方API文档，很详细。

观察下，上面有个声明了app这个常量。这个就是app.js里拿到的全局管理调用app.js里的方法和常量用的。很多需要存储和全局读写、处理的都可以进行操作以及放置在app.js里。在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。通过全局函数 getApp() 可以获取全局的应用实例，如果需要全局的数据可以在 App() 中设置。

Page({
  data: { // 参与页面渲染的数据
    logs: []
  },
  onLoad: function () {
    // 页面渲染后执行
  }
})

小程序的组件和控件有很多，可以看做是Html的标签，对称方式使用。具体组件特性看官方文档：

https://developers.weixin.qq.com/miniprogram/dev/component/

为了让开发者可以很方便的调起微信提供的能力，例如获取用户信息、微信支付等等，小程序提供了很多 API 给开发者，例如：

要获取用户的地理位置时，只需要：

wx.getLocation({
  type: 'wgs84',
  success: (res) => {
    var latitude = res.latitude // 经度
    var longitude = res.longitude // 纬度
  }
})

调用微信扫一扫能力，只需要：

wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})

需要注意的是：多数 API 的回调都是异步，你需要处理好代码逻辑的异步问题。更多API说明和用法，看官方文档。

https://developers.weixin.qq.com/miniprogram/dev/api/

页面的生命周期，我之前说过了，比较重要，大家可以看下理解下。

看下逻辑层需要注意的。除了页面的生命周期，还有页面的监听事件。onPullDownRefresh()：监听用户下拉刷新事件。

需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

onReachBottom()：监听用户上拉触底事件。

可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance，默认为50px。
在触发距离内滑动期间，本事件只会被触发一次。

onPageScroll(Object)：监听用户滑动页面事件。

onShareAppMessage(Object)：

监听用户点击页面内转发按钮（<button> 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。

注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮。

onTabItemTap(Object)：点击 tab 时触发。

Page.prototype.setData(Object data, Function callback)：setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value。

其中 key 可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。

注意：

直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
仅支持设置可 JSON 化的数据。
单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。

接下来看下小程序里的路由、跳转。

主要有这几种方式：

这几种方式url都可以传递参数。

wx.navigateTo：保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。注意：目前页面路径最多只能十层。

wx.redirectTo(OBJECT)：关闭当前页面，跳转到应用内的某个页面。如果你想让页面没有返回按钮，不能返回的话，就用这个跳转方式吧。

wx.reLaunch(OBJECT)：关闭所有页面，打开到应用内的某个页面。

wx.switchTab(OBJECT)：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

wx.navigateBack(OBJECT)：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

注意：

1、navigateTo, redirectTo 只能打开非 tabBar 页面。
2、switchTab 只能打开 tabBar 页面。
3、reLaunch 可以打开任意页面。
4、页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
5、调用页面路由带的参数可以在目标页面的onLoad中获取。

再看下模块化。

可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。

需要注意的是：

exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采用 module.exports 来暴露模块接口，除非你已经清晰知道这两者的关系。小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中。

// common.js
function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}
 
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

在需要使用这些模块的文件中，使用 require(path) 将公共代码引入：

var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

注意：require 暂时不支持绝对路径。

接下来看下小程序的视图层，也就是wxml和wxss。

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

WXML(WeiXin Markup language) 用于描述页面的结构。

WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

WXSS(WeiXin Style Sheet) 用于描述页面的样式。

组件(Component)是视图的基本组成单元。

这里挑几个比较重要的来说。首先是列表渲染，就是我们想实现一个List列表展示的时候，要进行List数据绑定，item数据绑定、可能还会涉及到模板和数据传递等等。

列表渲染：

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

wx:for 也可以嵌套。类似 block wx:if，也可以将 wx:for 用在<block/>标签上，以渲染一个包含多节点的结构块。例如：

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/> 中的输入内容，<switch/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供：

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx:key，会报一个 warning，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

条件渲染：

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

// page.js
Page({
  data: {
    view: 'MINA'
  }
})

在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块。

因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

还可能会涉及到模板template，可以在模板中定义代码片段，然后在不同的地方调用。

使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段，如：

<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：

<template is="msgItem" data="{{...item}}"/>

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：

<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>

模板拥有自己的作用域，只能使用 data 传入的数据以及模版定义文件中定义的 <wxs /> 模块。

另外，target（触发事件的源组件）和currentTarget（事件绑定的当前组件）也比较重要，大家可以自行看例子和文档学习。

dataset：在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。书写方式：以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如data-element-type，最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType。

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

Page({
  bindViewTap:function(event){
    event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
  }
})

小程序的引用，如引用外部css文件、引入js文件、引入wxml模板文件等等。

WXML 提供两种文件引用方式import和include。

import可以在该文件中使用目标文件定义的template，如：在 item.wxml 中定义了一个叫item的template：

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

在 index.wxml 中引用了 item.wxml，就可以使用item模板：

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。

include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置，如：

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

<!-- header.wxml -->
<view> header </view>

<!-- footer.wxml -->
<view> footer </view>

再讲一个wxs文件，不太常用。WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

注意：
1、wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
2、wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
3、wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
4、wxs 函数不能作为组件的事件回调。
5、由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
以下是一些使用 WXS 的简单示例。

页面渲染：

<!--wxml-->
<wxs module="m1">
var msg = "hello world";
 
module.exports.message = msg;
</wxs>
 
<view> {{m1.message}} </view>

页面输出：

hello world

数据处理：

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
  }
})

<!--wxml-->
<!-- 下面的 getMax 函数，接受一个数组，且返回数组中最大的元素的值 -->
<wxs module="m1">
var getMax = function(array) {
  var max = undefined;
  for (var i = 0; i < array.length; ++i) {
    max = max === undefined ? 
      array[i] : 
      (max >= array[i] ? max : array[i]);
  }
  return max;
}
 
module.exports.getMax = getMax;
</wxs>
 
<!-- 调用 wxs 里面的 getMax 函数，参数为 page.js 里面的 array -->
<view> {{m1.getMax(array)}} </view>

页面会输出5。

WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内，或以 .wxs 为后缀名的文件内。

每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。

可以直接创建 .wxs 文件，在其中直接编写 WXS 脚本。

var foo = "'hello world' from comm.wxs";
var bar = function(d) {
  return d;
}
module.exports = {
  foo: foo,
  bar: bar
};

在.wxs文件里面编写了 WXS 代码。该 .wxs 文件可以被其他的 .wxs 文件 或 WXML 中的 <wxs> 标签引用。

每个 wxs 模块均有一个内置的 module 对象。exports：通过该属性，可以对外共享本模块的私有变量与函数。

// /pages/tools.wxs
 
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

<!-- page/index/index.wxml -->
 
<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>

页面输出：

some msg
'hello world' from tools.wxs

在.wxs模块中引用其他 wxs 文件模块，可以使用 require 函数。

引用的时候，要注意如下几点：

1、只能引用 .wxs 文件模块，且必须使用相对路径。
2、wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
3、如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

module 属性是当前 <wxs> 标签的模块名。在单个 wxml 文件内，建议其值唯一。有重复模块名则按照先后顺序覆盖（后者覆盖前者）。不同文件之间的 wxs 模块名不会相互覆盖。module 属性值的命名必须符合下面两个规则：

1、首字符必须是：字母（a-zA-Z），下划线（_）。
2、剩余字符可以是：字母（a-zA-Z），下划线（_），数字（0-9）。

src 属性可以用来引用其他的 wxs 文件模块。引用的时候，要注意如下几点：

注意：
1、<wxs> 模块只能在定义模块的 WXML 文件中被访问到。使用 <include> 或 <import> 时，<wxs> 模块不会被引入到对应的 WXML 文件中。
2、<template> 标签中，只能使用定义该 <template> 的 WXML 文件中定义的 <wxs> 模块。

再看下官方给出的小程序性能优化建议。

setData 是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口。在介绍常见的错误用法前，先简单介绍一下 setData 背后的工作原理。

小程序的视图层目前使用 WebView 作为渲染载体，而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上，WebView 和 JavascriptCore 都是独立的模块，并不具备数据直接共享的通道。当前，视图层和逻辑层的数据传输，实际上通过两边提供的 evaluateJavascript 所实现。即用户传输的数据，需要将其转换为字符串形式传递，同时把转换后的数据内容拼接成一份 JS 脚本，再通过执行 JS 脚本的形式传递到两边独立环境。而 evaluateJavascript 的执行会受很多方面的影响，数据到达视图层并不是实时的。

常见的 setData 操作错误：
1. 频繁的去 setData。

在我们分析过的一些案例里，部分小程序会非常频繁（毫秒级）的去setData，其导致了两个后果：Android 下用户在滑动时会感觉到卡顿，操作反馈延迟严重，因为 JS 线程一直在编译执行渲染，未能及时将用户操作事件传递到逻辑层，逻辑层亦无法及时将操作处理结果及时传递到视图层；
渲染有出现延时，由于 WebView 的 JS 线程一直处于忙碌状态，逻辑层到页面层的通信耗时上升，视图层收到的数据消息时距离发出时间已经过去了几百毫秒，渲染的结果并不实时；
2. 每次 setData 都传递大量新数据。

由setData的底层实现可知，我们的数据传输实际是一次 evaluateJavascript 脚本过程，当数据量过大时会增加脚本的编译执行时间，占用 WebView JS 线程，

3. 后台态页面进行 setData。

当页面进入后台态（用户不可见），不应该继续去进行setData，后台态页面的渲染用户是无法感受的，另外后台态页面去setData也会抢占前台页面的执行。

图片资源：
目前图片资源的主要性能问题在于大图片和长列表图片上，这两种情况都有可能导致 iOS 客户端内存占用上升，从而触发系统回收小程序页面。

图片对内存的影响：
在 iOS 上，小程序的页面是由多个 WKWebView 组成的，在系统内存紧张时，会回收掉一部分 WKWebView。从过去我们分析的案例来看，大图片和长列表图片的使用会引起 WKWebView 的回收。

图片对页面切换的影响：
除了内存问题外，大图片也会造成页面切换的卡顿。我们分析过的案例中，有一部分小程序会在页面中引用大图片，在页面后退切换中会出现掉帧卡顿的情况。当前我们建议开发者尽量减少使用大图片资源。

代码包大小的优化：
小程序一开始时代码包限制为 1MB，但我们收到了很多反馈说代码包大小不够用，经过评估后我们放开了这个限制，增加到 2MB 。代码包上限的增加对于开发者来说，能够实现更丰富的功能，但对于用户来说，也增加了下载流量和本地空间的占用。开发者在实现业务逻辑同时也有必要尽量减少代码包的大小，因为代码包大小直接影响到下载速度，从而影响用户的首次打开体验。除了代码自身的重构优化外，还可以从这两方面着手优化代码大小：

控制代码包内图片资源：
小程序代码包经过编译后，会放在微信的 CDN 上供用户下载，CDN 开启了 GZIP 压缩，所以用户下载的是压缩后的 GZIP 包，其大小比代码包原体积会更小。但我们分析数据发现，不同小程序之间的代码包压缩比差异也挺大的，部分可以达到 30%，而部分只有 80%，而造成这部分差异的一个原因，就是图片资源的使用。GZIP 对基于文本资源的压缩效果最好，在压缩较大文件时往往可高达 70%-80% 的压缩率，而如果对已经压缩的资源（例如大多数的图片格式）则效果甚微。

及时清理没有使用到的代码和资源：
在日常开发的时候，我们可能引入了一些新的库文件，而过了一段时间后，由于各种原因又不再使用这个库了，我们常常会只是去掉了代码里的引用，而忘记删掉这类库文件了。目前小程序打包是会将工程下所有文件都打入代码包内，也就是说，这些没有被实际使用到的库文件和资源也会被打入到代码包里，从而影响到整体代码包的大小。

下面将会讲解一些开发中遇到的问题：

列表绑定渲染数据、跳转传值、小程序的工具调试使用、小程序授权弹窗、小程序客服反馈、小程序支付、小程序获取unionId和openId、小程序第三方框架、UI库等。

这个是开源share的，github地址：https://github.com/jaychou2012/wx_note

持续更新中，敬请关注... ...

https://download.csdn.net/download/qq_41570658/16036862