记录小程序开发的n个坑

1.微信小程序具有四个基本文件,包括:app.js,app.json.app.wxss,  project.config.json; 其中

        app.wxss:是微信小程序的基本样式,所有小程序都会默认使用该页面样式.

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

        project.config.json:是整个项目的基本配置,其中包含appid,项目名称,项目是否使用es6等基本设置,可以保证不同电脑上开发小程序时的统一配置.

        app.js:我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

 

2. 小程序发起的都是HTTPS网络请求，所以在小程序公众平台进行配置时需要配置项目对应的域名.在开发调试的过程中可以不校验协议和TLS版本，但在实际上线后必须进行HTTPS协议通信。

 

3. 小程序中的wxml结构不同于传统html页面,比如,小程序的view结构类似于div,text类似于span,但二者并不相等,其中image标签与html中的image标签并不相同,小程序的image如果要让图片自适应,需要添加属   性,mode=’widthFix’,而html页面没有限制.

 

4. 小程序中没有document,所以无法操作dom,不能使用jquery库的操作.

 

5. 小程序的脚本文件中，没有传统浏览器中的window对象,所有变量不属于window,所以不能使用window操作代码.

 

6. 小程序提供模板功能，模板拥有自己的作用域，它只能使用从data属性传入的数据。

 

7. 每一个页面文件夹下的.json文件是用来写配置项的，如果该页面无需添加相关配置，.json文件也要写上一对大括号（“{ }”），否则会报错。

 

8. 在同一个tab里的页面可以跳转，并且允许携带参数。不同tab的页面之间无法跳转，特别注意的是微信跳转页面存储只有五层,当我们使用返回按钮时,最多可以返回五层,如果页面逻辑过深很可能导致页面卡死.频繁使用wx.navigateTo()接口会报错。需要适当使用wx, redirectTo()接口,关闭页面再做跳转.,或者使用wx.switchTab()跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

 

9. 脚本文件里data的数据，在更新的时候要通过this.setData()方法来更新，而不能直接用“=”来做.获取时使用this.data.dataName来获取dataName信息.

 

10. 在组件标签里，可以通过“data-属性值”的方式绑定我们需要的数据，然后在事件内置event对象里进行获取。event.currentTarget.dataset.属性值 获取信息.

 

11. 小程序里也存在事件的冒泡，具体的冒泡事件可以参考官方文档，如果希望事件向上冒泡，则使用bind来绑定事件，若希望阻止事件冒泡，就使用catch来进行事件绑定。点击事件为tap,长按事件为longtap等.

 

12. 小程序支持文件引用，有import和include两种方式，import有作用域，也就是引入的目标文件里import的模板不会被引入；而include等于是将目标文件除<template />以外的整个代码进行引入。

 

13. wx.login()和wx.getUserInfo()是两个独立的接口，前者可以实现用户登录，这个过程是悄无声息的，不需要用户授权，返回code.根据code,向服务端发起请求,由后端拿到用户的openid.而wx.getUserInfo()可以拿到用户的具体信息,包括头像昵称,地址等信息.这个过程需要获得用户的授权，开发时也必须考虑用户拒绝授权的场景。

 

14. 目前小程序可以分享给微信好友和微信群，但小程序默认是没有这个功能的，只有在Page里定义了onShareAppMessage事件处理函数，点击小程序右上角才可以看到分享按钮。对于分享朋友圈小程序没    有开放,目前规避的方法主要采用将页面存储在小程序码中,之后使用小程序码组合成的图片进行分享.其中特别注意的是,对于canvas绘制图片时,图片要先使用wx.downloadfile();返回一个本地文件链接,再使用链接进行canvas绘制.其中wx.downloadfile中的下载链接域名需要再微信开发者工具中进行配置.否则当真实环境使用时无法下载.(此处有bug,真机使用开启调试可以使用);最后绘制好的图片需要使用wx.saveImageToPhotosAlbum()保存到相册.