微信小程序开发

一、微信小程序

小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

账号注册、开发工具下载

注册：https://mp.weixin.qq.com/wxopen/waregister?action=step1
工具：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201828
页面配置介绍：https://mp.weixin.qq.com/debug/wxadoc/dev/quickstart/basic/file.html
开发文档：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/structure.html
API：https://mp.weixin.qq.com/debug/wxadoc/dev/api/
小程序组件：https://mp.weixin.qq.com/debug/wxadoc/dev/component/
小程序开发资源汇总：https://github.com/lijiapeng0302/WeChat-small-program

小程序开发

①多人开发
如需多人开发，必须把其他开发人员加入的成员管理中，并为其添加开发权限

新建项目需要开发者的APPID，开发者APPID可在设置中的开发设置查看

②目录结构

app.js、app.json、app.wxss写的都是小程序的公用配置，其中app.json中写着小程序所有的文件路径，已经底部导航的配置

注：开发前需要用App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。

App({
onLaunch: function(options) {
// Do something initial when launch.
},
onShow: function(options) {
// Do something when show.
},
onHide: function() {
// Do something when hide.
},
onError: function(msg) {
console.log(msg)
},
globalData: 'I am global data'
})

其他页面可以通过全局的 getApp() 函数来获取到小程序实例。

var appInstance = getApp()
console.log(appInstance.globalData) // I am global data

1

## object参数说明：

属性	类型	描述	触发时机
onLaunch	Function	生命周期函数–监听小程序初始化	当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onShow	Function	生命周期函数–监听小程序显示	当小程序启动，或从后台进入前台显示，会触发 onShow
onHide	Function	生命周期函数–监听小程序隐藏	当小程序从前台进入后台，会触发 onHide
onError	Function	错误监听函数	当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
其他	Any		开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问

• App() 必须在 app.js 中注册，且不能注册多个。
• 不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
• 不要在 onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。
• 通过 getApp() 获取实例之后，不要私自调用生命周期函数。

开发者工具

在pages文件夹右键，先新建目录，然后在新建的目录下新建page，会自动生成

Js，json，wxml，wxss四个文件，其中js用来写页面逻辑及数据，json对页面进行单独配置，wxml写的是页面布局，wxss写的页面样式。

注：小程序中单位要用rpx，div要用view，文字要用text标签，页面内超链接跳转用navitagor；

代码编辑完成可在微信开发者工具中的工具里面选择上传、预览。

上传的版本可以在微信公众平台的开发管理中查看，如果预览没有BUG，即可提交审核，待审核通过后，可在线上版本中查看以上线的项目

在调试的时候可以打开——不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书

小程序的坑

1、小程序名称可以由中文、数字、英文。长度在3-20个字符之间，一个中文字等于2个字符。

2、小程序名称不得与公众平台已有的订阅号、服务号重复。如提示重名，请更换名称进行设置。

3、小程序名称在帐号信息设置时完成，请谨慎设置，一旦设置暂不支持修改。

4、更换名称进行设置。如果企业商标，组织名称等名称被侵权，可通过公众平台侵权投诉流程发起投诉，取回名称使用权。

5、个人开发者无法申请微信小程序；目前微信仅支持企业、政府、媒体、其他组织申请。（目前以开放个人注册不知道还会不会关闭QAQ）

6、一个主体可以注册30个，一个绑定身份的开发者只能创建5个微信小程序。

7、如果你不是特殊组织，你还是要花300元进行认证。

即使你对公帐号已经验证，你也需要缴纳300****元（支持微信支付）进行验证，这样才能够打开审核开关，发布小程序。
微信支付需要微信认证后才能使用。

8、服务器配置每月只有3次修改机会，省着点用，小心没机会。
没事别乱动下面的配置，一定确定了再动，并且一次性写完整，不然你改个小标点都会浪费你的一次机会。

9、你的域名、备案、https要准备好，不然做不了。（服务器域名需进过ICP备案、新备案域名需24小时候才能配置。域名格式只支持雅文大小写字母、数字及“-”，不支持IP地址及端口号）

10、小程序头像、介绍每月只能修改5次，服务范围每月只能修改1次。小程序二维码在第一个版本上线后才能获得。

11、选用模板消息时，你可用该标题的模板搭配不同的关键词使用，配置提交后关键词种类和顺序将不能修改。

12、找不到模板关键词的时候，可以进行申请添加。每月可以提交5次新关键词，通过后会被共享。（堆自家关键词的好机会呀！！）

13、一个小程序账号只有一个管理员（可修改），可以绑定10位开发者。

14、重点注意：

开发版本：使用开发者工具，可将代码上传到开发版本中。 开发版本只保留每人最新的一份上传的代码。点击提交审核，可将代码提交审核。开发版本可删除，不影响线上版本和审核中版本的代码。
审核中版本：只能有一份代码处于审核中。有审核结果后可以发布到线上，也可直接重新提交审核，覆盖原审核版本。
线上版本：线上所有用户使用的代码版本，该版本代码在新版本代码发布后被覆盖更新。
15、小程序AppSecret只有管理员才能查看，平台不会明文保存AppSecret。

16、数据分析只统计已发布线上版本使用数值，同时提供实时统计数据。

17、开发者工具目前提供windows 64 、 windows 32 、 mac版本（版本目前持续更新迭代中，可能需要常常去update）。

18、内测阶段，代码上传功能仅管理员微信号可操作。

19、书写代码后，工具会自动帮助用户保存当前的代码编辑状态，直接关闭工具或者切换到别的项目，并不会丢失已经编辑的文件状态，但需要注意的是，只有保存文件，修改内容才会真实的写到硬盘上，并触发实时预览。

20、获取用户输入：需要使用组件的属性bindchange将用户的输入内容同步到 AppService。

21、脚本内不能使用window等对象：
JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件。

22、zepto/jquery 会使用到window对象和document对象，所以无法使用。

23、一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。请避免多层级的交互方式，或者使用wx.redirectTo。

24、样式表不支持级联选择器：
WXSS支持以.开始的类选择器；可以使用标签选择器，控制同一类组件的样式。

25、本地资源无法通过 css 获取：
background-image：可以使用网络图片，或者 base64，或者使用标签。

26、修改窗口的背景色：
使用 page 标签选择器，可以修改顶层节点的样式。

27、前台、后台定义：
当用户点击左上角关闭，或者按了设备Home 键离开微信，小程序并没有直接销毁，而是进入了后台；
当再次进入微信或再次打开小程序，又会从后台进入前台，只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。

28、App() 必须在 app.js 中注册，且不能注册多个。
不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
不要在 onLaunch 的时候调用 getCurrentPage()，此时 page 还没有生成。
通过 getApp() 获取实例之后，不要私自调用生命周期函数。

29、tabBar 是一个数组，只能配置最少2个、最多5个tab，tab 按数组的顺序排序。（底部导航栏）

30、可以设置各种网络请求的超时时间。

开发遇到的坑

31、微信小程序里面是允许用户自定义背景图的，但是限定了背景图的路径及地址，之前一直用相对路径来写，微信开发者工具中也显示出了背景图，误以为没有问题，但是预览的时候发现手机中不显示背景图

解决办法：
第一、用在线图片转base64码的方法，这种方法的优点在于图片不存储在本地或者服务器上，占用空间小修改方便，缺点是小图片处理效果更好，大图代码相当的长
第二、将图片上传至服务器，引用图片地址就可以了，方便快捷，不过修改麻烦且占用服务器空间。 第三、引用本地本经图片可以在wxml的行内引用，

32、下拉没有触发onPullDownRefresh
解决办法：代码完全没有问题，但是预览了以后发现只有向上拽是好用的，下拉完全没有反应，原因是因为官方默认是关闭了下拉事件，只要去app.json文件里面修改windows里面参数就可以了

33、在IOS8上的系统，如果不使用 -webkit ，那么很多布局都不会生效；特别是 flex
34、如果一个控件的width给的100%，在这个控件中设置属性paddingLeft或paddingRight；那这个控件的width = 屏幕的宽度 x 100% + paddingLeft / paddingRight。就会出现控件超出屏幕的情况。
35、微信小程序的最外层是 ； 出现


其他控件/内容


这种情况时，Android5.0系统和IOS10系统，都不能显示内的数据；而IOS8系统则可以显示。（ps：当展示的内容超过屏幕的高时，使用也是上下滑动的。）
36、跳转到拥有tab选项卡的页面时候，使用的是switchTab()。如果使用的是navigateTo 或者 redirectTo ，它不但不会跳转，而且还不会有任错误何提示。
37、层级关系：如果 没有设置 z-index属性，与重合时，是透明的，会把显示出来。只要设置了z-index 属性（属性值必须 > 0），就就能覆盖住。
38、在写wxml页面时，必须在所有的内容外包一个大的view标签
39、Post请求，在服务器端都是获取不到参数city的值的

解决办法：在post请求中加上下面这个请求头，服务器端马上就可以获取到city参数的值了。 header:
{“Content-Type”:“application/x-www-form-urlencoded”}
弊端：如果你写了这个header，它是不带session_id的，跳转页面的时候会导致丢失登录态，所以如果想加上登录态，还得自己手动按照格式在header里面加上session_id

40、小程序中的地图组件内，只能用cover-view、cover-image
41、web-view是默认全屏显示
42、登录已经不能自动弹窗

1、使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息。

详情参考文档:

https://developers.weixin.qq.com/miniprogram/dev/component/button.html

2、使用 open-data 展示用户基本信息。

详情参考文档:

https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html

43、小程序用WebSocket ，如果连接内有特殊字符，必须通过encodeURL处理一下
44、其他坑：https://segmentfault.com/a/1190000008516296
45、全局支持class和style属性，不支持id属性。
46、如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。支持的节点（https://mp.weixin.qq.com/debug/wxadoc/dev/component/rich-text.html）