微信小程序开发技巧总结

这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战

前言

近期开发了微信小程序的项目，也遇到了一些问题，再次记录下来，看看你们师父也有遇到过相似的。

修改对象、数组中某一项

小程序里面一般会有这样相似的需求，好比对一个数组进行选择或则其余操做等。

修改对象中某一项

修改对象中某一项会比较简单一点，直接将对象的某一个属性使用中括号便可。例如：

this.setData({
  ['params.type']: ''
})
复制代码

这样就能够单独的修改对象中某一个属性的值，而不用所有修改。

修改数组中某一项的值

修改数组中对象的某一个值稍微麻烦一点，毕竟咱们须要知道修改的值的下标，知道了下标和上面的对象差很少，惟一不一样在于须要再key部分须要加入变量，因此最终写法以下：

this.setData({
  ["tableData[" + index + "].coverPic"]: "../../images/img_error.png"
})
复制代码

上面例子中index为数组下标，就是修改数组中某一个对象的coverPic的值

canvas画图片须要先下载图片

这个需求也很常见，好比在作分享到朋友圈的时候咱们须要经过canvas来画一张拉新的图片，因此图片上面须要带一张二维码，当咱们从后台获取到二维码后，若是直接就经过api画到canvas上是不行的，须要先经过api下载后才能够。

canvas生成图片后保存

经过canvas生成的图片一般咱们都会保存到用户的手机里面，再让用户去发送给别人拉新，保存图片的时候就变成了几率事件了，有时候能保存成功，有的时候不能保存成功，这个问题其实就是须要咱们在生产draw方法的回调里面去保存图才能保证成功。

wx.request获取cookie的值

在微信的发送请求的api中有的时候须要咱们本身去获取cookie的值来和后端进行通信，咱们知道Vue是获取不到的，那么小程序是能够获取到的，怎么获取呢？若是你们有注意观察这个api返回的数据就知道其实获取cookie很简单，以下：

res.header["Set-Cookie"]
复制代码

上面的res为请求接口成功后的返回值

使用WEUI某几个组件

咱们知道小程序的扩展能力里面是能够直接使用WEUI的，那么除了官方的经过useExtendedLib来使用外，其实咱们还能够本身引入来使用，好比咱们须要使用WEUI里面的Slideview、HalfScreenDialog、ActionSheet这三个组件，一般这三个组件的使用率仍是很高的，那么咱们能够本身到WEUI的github仓库拷贝本身想要的组件到本身的项目中当作普通组件使用便可。

app.js里面能够自定义工具

一般小程序若是有须要用到本身写的工具函数的时候，咱们就是在哪一个页面须要就在按个页面导入，特别是使用相对路径的时候比较麻烦，其实咱们彻底能够在小程序的app.js里面引入后挂载到app上，这样须要用到的页面只须要经过getApp().utils便可使用啦，如：

import utils from './utils/utils.js'
App({
  globalData: {
    userInfo: null,
    systemInfo: null,
  },
  $utils:utils
});

// 页面使用
getApp().$utils.formateDate()
复制代码

globalData里面也是能够定义一些经常使用数据或者公共的方便其余页面使用

小程序地址传值不能太长，太长会被截取

小程序中的地址后面携带参数时，若是参数特别多的话，一旦超出就会截取致使出现意想不到的错误，其实这里和网页是同样的，地址栏后面携带参数是有限制的。

小程序代码包限制

小程序的代码包是有限制的，这个你们经过官方也能够查到，一般整个小程序全部分包大小不超过20M、单个分包/主包大小不能超过2M，因此一旦你的项目比较大的话要提早规划，作好分包，这样可以分散包的大小，并且这样对小程序的性能也会更好。

小程序自定义事件参数

微信小程序中事件是不能携带其余参数的，那么一般咱们是须要它可以携带参数才方便咱们进行相应操做的，那么这个携带参数其实就是在结构上面添加自定义属性，如data-index等，而后经过点击事件的事件对象来获取这个自定义属性的值，例子以下：

<button bindtap="openLocation" data-lat="30.49984" data-lot="114.34253">打开导航</button>

openLocation(e) {
  wx.openLocation({
    latitude: Number(e.currentTarget.dataset.lat),
    longitude: Number(e.currentTarget.dataset.lot),
  })
}
复制代码

设置整个页面的样式

开发微信小程序的时候有时须要设置整个页面的样式，但又不想本身加一个标签，那么咱们能够在样式里面这样设置接口，以下：

page{
  background:#FF4400;
}
复制代码

block

微信小程序中block标签和Vue中的template同样的，不须要新加标签的状况下使用block，渲染后就可以达到多个并列的标签了，好比在作循环的时候：

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

wx:if vs hidden

在小程序中使用wx-if，是基于局部渲染的形式。好比wx:if初始渲染条件为false时，框架什么都不会作；只有为真的时候才开始渲染该组件。而使用hidden在初始的时候就会渲染，它的值只是负责该组件的显示与隐藏。所以在切换的时候，wx:if有更高的性能消耗，当咱们项目须要频繁切换时，建议把wx:if换成了hidden。

常量或者一些不怎么变化的均可以不用放在data里面

小程序里面的data数据太多也会影响小程序的性能的，因此不是任何东西都须要放到data里面，其实咱们还能够放到最外层，如：

const app = getApp()
let pageIndex = 1
let pageSize = 10
Page({
  data:{}
})
复制代码

webview里面的网址必须在公众平台设置白名单

这个限制相信大部分都知道，若是没有这个限制的话，估计不少网页版的均可以直接搬到小程序上，甚至还能够引用别人的网站上的东西，因此为了防止这种事情发生，微信作了限制，必须在公众平台配置域名白名单，只有在白名单里面的网址才能在webview里面访问。

分享中使用异步不生效

小程序的分享是在页面的一个函数里面，在这个函数里面分享的时候是使用异步是不生效的，其实这里当咱们点击分享的时候很快就分享出去了，若是用了一个异步请求啥的估计就慢了，因此使用异步是不能阻止分享的，可是咱们能够在里面进行一些异步的调用，至因而那个先运行就不清楚了。

复合码解码

有的时候在作小程序的时候须要使用普通的二维码来做为小程序引流码，那么这种码在获取参数的时候是须要对url进行解码的，以下：

decodeURIComponent(options.q)
复制代码

开发者工具能够经过二维码编译以及参数编译

作过支付宝小程序后就会发现，微信小程序确实要比支付宝方便不少，就这个功能目前支付宝是没有的，后面估计会添加，入口以下：

wx.requestPayment判断失败和取消

小程序的支付api返回的不是像一般咱们的接口那样，返回标识的，小程序的取消支付是须要本身去对字符串进行操做的，如小程序返回的信息是errMsg: "requestPayment:fail cancel"，在经过这个信息中fail cancel来判读是否取消。

WXS

wxs是小程序的一种脚本语言，大体和js差很少，可是没有js强大，这里不介绍脚本自己，单独说说如何使用，其实当咱们在页面上有些数据须要格式化或者其余运算操做的时候就可使用这个wxs，有点相似Vue里面的计算属性，使用很简单就是引入便可使用，这里有两种定义方法，一种是直接在wxml里面，一种是单独的文件。因此若是只是个别页面须要单独的格式化或者其余运算能够采用这种方案。

直接在wxml里面定义

这里你们能够直接看看官方的例子

<wxs module="foo">
var some_msg = "hello world";
module.exports = {
  msg : some_msg,
}
</wxs>
<view> {{foo.msg}} </view>
复制代码

单独文件.wxs

若是是单独的文件，那么后缀名为.wxs，使用以下：

<wxs src="./../comm.wxs" module="some_comms"></wxs>

<!-- 调用 some_comms 模块里面的 bar 函数，且参数为 some_comms 模块里面的 foo -->
<view> {{some_comms.bar(some_comms.foo)}} </view>
复制代码

模板复用

小程序也提供给了一个叫作代码片断的模板，这种模板就至关于若是多个地方用到只须要写一份就能够，其余地方须要引用就行了。

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

<template is="msgItem" data="{{...item}}"/>
复制代码