小程序开发配置和问题点

小程序开发配置和问题点

这里讲到的是原生wepy开发
首页我们创建初始模板，这个在微信开发者工具当中会生成初始模板，个人建议加入github上面的一个借口工具包和一个富文本解析组件
接口工具包下载 封装请求，个人感觉非常好用，当然你也可以下载之后进行适当的修改
wxParse-微信小程序富文本解析自定义组件，支持HTML及markdown解析
下载地址

因为原来公司要做可视化图标也引入过可视化组件，这里举例几个
wx-charts , Echarts , 蚂蚁数据可视化 AntV/F2（h5小程序版本）
这里我三个组件都是引入使用的，个人觉得AntV F2 比较好用，

1. 首先体积对比Echart来说体积小，利于优化

2. 对比wx-charts来说功能较全，wx-charts功能比较单一，样式做的不太好

3. Echarts虽然功能较全，但是组件包比较大，而且字体的兼容也有一定的问题，也是是我技术比较菜没调好，所以改换Ant/F2

这样前期的一些开发准备工作就完成了，接下来就可以根据文档开发了

基本信息授权和手机号授权注意点
从2018年4月开始授权用户信息不能进来首页直接授权，一般提交会审核不通过，这点要注意，一般授权用户信息写在“我的”页面里面，或者写在首页需要授权用户信息的元素上面，另外手机号授权和基本用户授权是分开的，要获取用户的手机号要进行手机号授权，二者不可以嵌套，曾经被老板要求同时授权手机号和用户信息，百度出来教程，体验并不友好，会弹出两次授权，所以就不写出来了

页面渲染注意点
setData设置的数据量是有限制的，单次设置的数据大小不得超过1024kb，如果超过这个数据会照成报错

vdSyncBatch 数据传输长度为 2260792 已经超过最大长度 1048576

文本的换行失效
很多时候对于现实的文本，我们需要让其换行，然后我们在需要换行的地方加上了\n；
但是经常会失效，这是因为\n换行只在 text 控件中生效，用view是不会生效的，还有空格的设置也是只对text生效

data-后的变量名不区分大小写

 <view bindtap='ontap' data-album_id='{{item.albumId}}'>
 </view>

此处的album_id不能写成albumId，如果你写成albumId，在ontap方法中获取albumId却是没有值，
它会把albumId转换为albumid的，这样就导致了数据的不一致，容易发生错误，这是因为data-后面的变量
命名是不区分大小写的，而在ontap中获取变量的值却又区分大小写，所以为了保持一致性，我们把data-后面
的变量命名一律都用小写，单词直接用_连接。

还有就是海报生成，我们用canvas根据后端返回的信息生成海报，根据同源策略首先我们要把图片下载在本地，不然在发布之后在手机是生不成海报的

下载图片方法

var then = this
wx.downloadFile({
      url: 'https://zx-travel-assistant.oss-cn-hangzhou.aliyuncs.com/pic/evaluate_post.png', // 后端返回地址
      success: (res) => {
        if (res.statusCode === 200) {
          then.setData({
            sharePicUrl: res.tempFilePath
          })
        }
      }

另外textarea组件在手机调试的时候会发现它会在遮罩层的上面，这里我们可以用cover-view标签做遮罩，只不过cover-view标签只能包裹它本身和cover-image 标签，不可以方input类的标签，如果你们要求非要那样做，只能在遮罩层弹起的时候把textarea的标签隐藏

最后一个重点
开发过程中千万不要更改开发者工具的版本，本人遇到过这个坑，也不是不可以换，一定要记住自己开发时候的版本，方便下载回来，曾经开发一个日期组件就遇到过这个问题，开发好之后发布一点问题没有，在开发新版本更新开发者工具之后日期组件出现了问题，怎么调试都找不到问题在哪，崩溃了一整天，深刻教训