微信小程序开发技巧

设置 data 某项或部分数据

this.setData({
   '项名':值
})

this.setData({
      name: 'xiaoming',
      age: '6',
      // 复杂字符串拼接的项名时，最外层套一个中括号
      ['centerNameDataList[' + index + '].checked']: true
    })

流式布局下如何让 scroll-view 既充满空间又有自己的高度

给 scroll-view 外层套一个 view，让 page 高度固定比如100%，再使 view 填满目标空间，这样只需设置 scroll-view 的高度 100% 充满 view 即可。

<view class="scroll">
<scroll-view></scroll-view>
</view>

page{ height: 100% }
view{ flex:1, overflow: scroll }
scroll-view{ height: 100% }

scroll-view 的高度有什么用

很多功能需要 scroll-view 有高度才能实现，比如 bindscrolltoupper、bindscrolltolower 等，没有高度，很多事件无法触发或实现。高度可以是固定值、vh、或百分比均可

小心 var 赋值

方法内赋值时，如果直接将 var a=b，将可能引起 b 的改变。

const Apis = {
    foo:{
        url: '/app/path?name=tom'
    }    
}

onRequest: function(options){
    var api = Apis.foo

    if(options.age){
        api.url = `${api.url}&age=${options.age}`
    }
}

第一次执行 onRequest 时，假设 options.age = 10，那么 api 的最终结果是 /app/path?name=tom&age=10，更改 options.age 的值再次执行，Apis.foo 的 url 保存了上次执行的结果，也就是它也变成了 /app/path?name=tom&age=10，导致第二次执行 onRequest 后，api.url 将存在两个 age=xx，避免的方法是在 api 赋值时，将其赋值为新对象，新对象的值来自于 Apis，避免使 api 直接等于另一个对象

var api = {
        url: Apis.foo.url
    }

debug断点调试

打开小程序开发工具，打开“调试器”，切换到Source页，在Page中找到当前要调试的JS，并在其上打上断点即可

用 WeUI Upload 组件选择、预览和上传图片

先在page.json文件中添加引用

"usingComponents": {
    "mp-uploader": "weui-miniprogram/uploader/uploader",
    "mp-cells": "weui-miniprogram/cells/cells",
    "mp-cell": "weui-miniprogram/cell/cell"
  }

在 wxml 中

<mp-uploader bindselect="onCertImageSelect" bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}"
    upload="{{uploadFile}}" files="{{files}}" max-count="5" title="凭证上传" tips="" delete="true">
</mp-uploader>

事件顺序是 select->bindselect->upload->bindsuccess或bindfail，如果 select 过滤函数返回 false，组件将中断，后续事件也不会触发，即本次动作结束。了解了其执行流程，就可以在 js 中分别实现对应的事件处理逻辑。真正上传文件的逻辑是在 upload 发生，其要求最终要返回一个 Promise 对象，且 Promise 中的 resolve 要传递一个含有 urls 数组元素的 object，即 resolve({ url:[] })

upload:function(files){
    // files 即为待上传文件所组成的对象
    // do upload file

    return new Promise((resolve, reject)=>{
        if( 全部完成 ){
            resolve({
                urls: [ 成功上传文件1，成功上传文件2]
            })
        }else{
            reject('some error')
        }
    })    
}

成功执行上传的文件（即被放在 urls 数组中的文件），组件将自动以正常方式显示，其它未成功会显示为 Loading 状态始终转圈圈不会停止也不会变成 error，如果 reject 则集体 error。Uploader 组件比较好的地方是所选文件不用强制在页面级变量统一保存，在 upload 之前，包括 upload 时，都可以通过参数访问到，预览时也不必手写代码，算是比较易用的。缺点是，官方文档不准，部分属性不知道有什么作用，比如 files，如果乱写反而会引起冲突。

引入 npm 组件

以 vant weapp 组件为例
首先，安装 nodejs，它内置 npm，多讨厌你说！默认安装后，在控制台输入 npm -v 如果出现版本号，说明安装&环境变量设置正常。可以将 npm 单独升级一下，非必须工作，命令是 npm install npm@latest -g
下一步，在控制台中（或者在微信开发工具自带的终端中，但需要微信开发工具在安装 npm 之后打开或重启，以便使 npm 全局命令生效）切换到当前工作路径下（这也是在开发环境中打开的意义，默认路径就在项目下），运行组件安装命令 npm i @vant/weapp -S --production
下一步，按照 vant weapp 官方快速上手的指示，依次完成修改 app.json、project.config.json、构建npm包三项工作。下面说一下这三项工作可能的坑：

• app.json 官方让去掉 "style":"v2"，这不会影响js，但可能会影响默认组件的样式，而被修改成vant weapp 样式，所以也可以不去掉，只要通过测试确保所使用的组件工作正常即可
• project.config.json 中注意官方的文档提示，以及开发工具版本的影响，当前就是按照文档提示，将 "miniprogramNpmDistDir": "./"而不是"miniprogramNpmDistDir": "./miniprogram/"
• 按官方文档执行构建npm命令，并勾选“使用npm模块”
  下一步，即可在 page 中按需引入组件并使用，但由于都是UI组件，可能产生样式冲突，需多注意、多检查

vant weapp Uploader使用示例

首先完成引入 npm 组件的工作，在 page.json 声明对组件的引用

"usingComponents":{ "van-uploader":"@vant/weapp/uploader/index" }

在 wxml 文件中添加组件 <van-uploader file-list="{{ certFileList }}" accept="image" max-size="5242880" max-count="9" upload-text="上传凭证" image-fit="aspectFill" bind:after-read="onAfterRead" bind:delete="onDelete" bind:oversize="onOverSize" /> 并依照文档实现各API。需要提到的是，第三方组件的“完成度”似乎都比原生 Uploader 要好，比如 van-uploader ，不仅预览没有问题，可控制项也清晰，更好的是默认文件要一个一个的选择而不是依次选择多个，这就避免了批量上传的尴尬，挺好。