微信小程序

# 集思会Lite 小程序 ## 访问 * 微信搜索集思会Lite * 扫码访问  ## 预览  ## 该小程序的相关数据统计  ### 累计用户数 历史累计访问小程序的用户数，同一用户多次访问不重复计； ### 访问人数 昨日访问小程序内所有页面的总用户数，同一用户多次访问不重复计。 ### 新用户数 首次访问小程序页面的用户数，同一用户多次访问不重复计。 最近接触小程序，记录一下从零开发到提交审核正式发布的完整过程，和其中踩过的坑，与大家一起学习。 ## 一.选型 项目的前期调研： 从小程序随着微信对小程序的推广越来越大，小程序的相关生态也日渐完善，于是，在进行小程序的相关开发工作之前，进行了开发的调研工作。 首先从项目框架的选型上，主要有3种选择，微信小程序的原生开发，wepy 框架开发，labrador框架开发，原生开发是使用小程序的自己的一套开发标准，参考web 的原生开发，wepy 是 vue 风格的小程序开发框架，labrador 则比较亲和 React，对于详细的区别和考量，我们来看看一些别人的讨论： 《微信小程序开发最佳实践》——skylor：  主要意思就是说使用原生开发少去了第三方框架的学习成本。 腾讯官方的wepy框架下相关人员提出的关于选型问题的讨论：  总结一下就是，wepy 项目是官方维护的，它的可靠性是有保障的，它的下面这句话很重要： 从Web转向WePY时，开发者会拿Vue, React之类的来对比，因此会更多的看到的是WePY的不足，而原生切WePY的开发者更多的看到的是WePY的优势。 之前使用过 vue ，于是优先考虑了 wepy 的选择，但实际上你会发现比较尴尬的一点，这个 因为小程序本身的一些限制，在使用wepy的时候有时候像 vue，有时候又不像，你还得在其中去区分在 vue 里可以使用的方式在 wepy 里可不可以使用，反而会弄混淆，这样的学习成本倒不如一开始就使用原生来的简单清晰。 labrador直接放弃，原因见第一个截图。 至此，确定了目前选择原生开发。 ## 二.注册 如下图开始，填写相应的注册信息：  注册成功以后，会在这里得到一个APPID：  详细的请看这里[官方注册流程地址](https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html?t=201828)， ## 三.微信web开发者工具 确定选型后下载官方微信web开发者工具进行开发 [官方下载地址](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/uplog.html) 扫码登录，填入项目地址，APPID和项目名称：  ## 3.开发 * 目录结构： ``` | |___assets // 存储图片 | |___pages // 页面 | | |___index // 首页 | | |___index.wxml // 页面结构文件 | | |___index.wxss // 样式表文件 | | |___index.js // js文件 | |___utils // 全局公共函数 | |___app.js // 系统的方法处理文件 | |___app.json // 系统全局配置文件 | |___app.wxss // 全局的样式表 | |___config.json // 配置文件 ``` * 小程序配置文件app.json内容 具体的这个文件的配置起什么作用，可以看这里[app.json配置官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/quickstart/basic/file.html#JSON-%E9%85%8D%E7%BD%AE)  而写在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)。 * 接口地址记得要登录小程序后台添加，如： 在[小程序管理后台-开发设置-服务器域名](https://link.juejin.im/?target=https%3A%2F%2Fmp.weixin.qq.com%2Fwxopen%2Fdevprofile%3Faction%3Dget_profile%26token%3D1316597147%26lang%3Dzh_CN)中将`request合法域名`配置为`https://xxx.com` ## 一些踩过的，少走弯路的坑： 1. wxss里面的css样式引用图片地址，不能引用本地的，比如： 解决方案，引用在线地址和使用image标签，或者图片可以使用base64。 2. 下拉刷新。使用onPullDownRefresh下拉处理下后，要在后面使用wx.stopPullDownRefresh()停止下来刷新，否则界面会停留在下拉以后的界面，也就是上方会留下下拉空白。（原来以为下拉后会自动收回上去的）  3.wx.switchTab: url 不支持 queryString，也就是说，跳转到tab页面不支持带参数，同时也要注意跳转到底部tab页面和非tab页面调用不同方法。 4.有地方需要用到嵌入网页的功能，使用了发现不起效果，原来是有限制，如下：  我是个人版，所以无法使用该组件。支付方面个人版也会有限制，有条件的推荐申请企业版。 5.绑定事件获取的target与currentTarget是有区别的 通常我们点击某个元素的时候需要获取到当前元素的属性，点击以后拿到的参数里有这两个属性需要区分一下，target 和 currentTarget。两者的区别在于： target：触发事件的源组件; currentTarget： 事件绑定的当前组件; 6.请求的接口地址需要是HTTPS的，所以需要升级下HTTPS，不用全站HTTPS，只要接口是HTTPS就可以了。此外，第一项里提到的在线图片地址可以不用是HTTPS。 7.任何情况下的视图更新只能通过setData()。 如果你以为数据变了，对应的视图也会相应改变，那就错了，这个时候你还是需要通过setData()方法改变相应变量，视图才会更新。 ## 四.提交体验版进行多用户实机测试 当我们本地开发好以后，点击预览，会得到一个二维码，扫描二维码即可在自己的手机上预览实机效果（不过每次修改后都得点击重新编译预览才行，并不方便），但是我想要别人也来测试实机效果的时候，把这个二维码发过去却不行，界面会提示： ``` Unauthorized access ``` 看来这个预览还的是开发者的自己的微信才行，那么如何让别的用户测试呢？点击这里：  上传成功以后，登录小程序后台，选择开发管理：  点击箭头，选择将刚才提交的版本作为体验版，然后点击版本号下面的文字就能得到开发版的分享二维码了。 但是这个二维码别人还不能用，原来还要进入左边的用户身份栏，然后点击箭头：  添加用户并勾选体验者权限，该用户才能体验。否则得到的二维码也会提示没有权限。每添加一个用户都要扫一下二维码，而且只能是管理员添加，而且提示体验名额�