微信小程序开发踩坑纪要

开始

• 微信公众平台申请小程序账号，需要企业资质。获取APPID。
• 下载并安装小程序开发工具。
• 创建项目，如果要在手机预览，需要填写APPID。
• 选择quik start,自动创建demo，熟悉其结构与开发规范。

熟悉开发文档

结合开发者文档，在demo上做修改调试，熟悉框架，组件，API与常见问题。

在demo项目中可以看到wxml,wxss,js,json这几种格式的文件，在每一个页面中都必须有这几个文件，不可少。

在项目根目录下，有app.js,app.json,app.wxss三个文件，这三个文件是全局公共的，不能改名，不能少。

• .js是写业务逻辑，监听并处理小程序的生命周期函数、声明全局变量，调API的。
• .json是配置文件，设置tabbar，顶部标题栏等信息样式。
• .wxss是样式文件，可以当做css文件来理解，里面写css样式。样式属性值不支持auto。wxss中不能调用本地之源，比如设置背景图的时候，就不能用本地的图片，要么转成base64，要么用网络路径上的图片地址。
• .wxml是页面结构文件，我们可以理解为html，只是没有html的标签，使用的都是小程序的标签。

pages目录下是各个页面，页面和页面里的几个文件名要一致，wxml,wxss,js,json文件不能少，且建立的文件要在app.json中配置。在app.json里配置页面，会自动生成页面的目录和所有文件。

js支持模块化开发，支持ES6。

项目开发，踩坑

• 小程序样式单位，用rpx替代px，它会自动计算比例。UI上多少px，就用多少rpx。
• wxss里宽高等不支持auto。
• wxss里不能调用本地资源，如背景图，只能用base64或网络图片路径。
• 背景图片默认会被放大撑满，如想正常显示，需要设置background-size为实际像素的rpx。
• app.wxss是全局样式，页面里的wxss会覆盖app.wxss里的同名样式。
• wxml可以理解成HTML，把view等标签都当成div方便理解。
• 文字内容只能放到text组件里。
• input，textarea等表单组件如果因键盘的呼起而上移，输入的内容不能及时看到，尽可能让表单输入框放在屏幕上方，不要让键盘影响。
• video组件在安卓下可以用其它层遮盖，但在ios下盖不住，解决方法就是让其不可见。
• 操作video组件，可以通过wx.createVideoContext(videoId)来获取video对象，video标签上需要绑定videoId。要对视频进行暂停播放等操作就可以通过此方法获得的video对象来调用相应的方法。
• 视频直播，在video组件上加live属性。否则不能播放m3u8直播视频流。
• 小程序里不支持window，document等对象，不同于浏览器，因此也不能用jQuery、zepto等框架了。
• 设置元素的显示隐藏，样式等需要通过this.setData({})来改变界面中的数据进行控制。setData会重新渲染界面。
• map、canvas、video、textarea 是由客户端创建的原生组件，原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。 原生组件暂时还无法放在 scroll-view 上，也无法对原生组件设置 css 动画。
• 小程序上传限制1M，因此图片图标等尽可能放到CND上，在小程序项目中引用网络地址就行了。节省空间。
• request的地址只能是公众开发平台中绑定的地址，只支持https。上传下载等地址都只能是对应的配置地址。其它访问的静态资源随意。
• post请求传递参数的时候header默认是json格式，后端可能接收不到此格式过来的数据，需要设置header为{'content-type': 'application/x-www-form-urlencoded'}。