一、微信小程序

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

账号注册、开发工具下载

注册：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参数说明：

• 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）