微信小程序开发者文档

致：小程序开发中走过的那些坑

前言：小程序很多东西都是自己封装好了，开发人员只需要自己进行一些配置就可以了。这对于快速开发来说，是一大好处，但是对于个性化来说，却是一个弊端。

小程序的配置文件：JSON文件。

1.     除了app.json是必须要的，其他页面不强制需要。

2.     其他页面如果有该文件，则会覆盖app.json中的配置。

3.     其他页面的json文件只能配置程序顶栏信息，比如背景色，标题等。

4.     注意，该文件不能添加任何形式的注释，切记。

配置小程序打开时的首页：

1.     进入到app.json文件。

2.     在pages字段的list里面，把首页的路径放到第一个。

3.     小程序启动后会默认打开该页面。

小程序的底部导航：

1.     小程序的底部导航是微信封装好的一个模块。我们只需要设置文字图片和跳转即可。不需要自己实现。

2.     只需要在app.Json文件中加入tabBar字段并进行配置即可，注意，最少2个最多5个。

3.     底部导航的顺序，按照你设置的list的顺序从左到右排布。

4.     底部导航的图片，切图时的最佳分辨率是83*83px的图标。否则会出现模糊或者边缘刺。

小程序的超时设置：

1.     分为请求、连接、上传和下载超时。不设置则默认为全部60秒。

2.     全部设置60秒并不合理。建议请求10秒，连接10秒，上传30秒，下载120秒。

3.     以上设置理由根据现有手机网络环境估算得出。

调试模式的开启：

1.     小程序开发时提供调试模式，在app.json中设置debug为true即可。

2.     如果不进行设置，默认false，在调试时候启动小程序需要自动退出并手动重启，比较麻烦，建议开启。

3.     手机端的调试只支持控制台和系统输出，调试的时候如果不想麻烦，可以使用consloe.log打印对象信息。

小程序初始化：

1.     小程序初始化完成会触发onLaunch事件。

2.     onLaunch完成时，页面其实并没有生成和加载，不可使用getCurrentPage（）方法，切记。

页面初始化：

1.     页面初始化通过页面的js文件来完成。

2.     Js文件中必须有个page（），他是用来注册页面的，没有该函数，页面无法注册。

3.     小程序会先加载js中的page（），然后渲染页面。

修改数据绑定：

1.     数据绑定的动态变更必须要使用setData函数来完成。

2.     直接修改data是无效的。

3.     setData有一个上限，数据量不能超过1024KB，切记。

4.     setData可以设置不被预定义的数据。预定义指的是data中的变量。

全局设置：

1.     设置globalData有助于你进行全局调整。

2.     比如设置OPEN_ID，SESSION_KEY，basePath等。

3.     OPEN_ID，SESSION_KEY在小程序初始化完成的时候就可以去获取。以便后面的代码调用。

4.     basePath是为了发布时不需要修改多处接口地址考虑的。

5.     一般把basePath设置为https://IP地址:端口号/ 即可。在发布时，改为正式服服务器地址即可，避免修改多次且可能造成的未完全修改风险，本方法参考至JSP技术的basePath以及JAVA的基类思路。

6.     用法上，通过在其他js文件中添加两句代码即可获得app实例。如下：

7.     var app = getApp();

8.     var basePath = app.globalData.basePath;

9.     这样就可以得到app实例的全部数据和方法，类似于JAVA基类用法。

10.  需要注意的是，globalData是一个变量，可以在其他位置修改。但是最好不要修改。切记。

数据绑定：

1.     进行数据这个做法，腾讯应该是参考了Vue.js这个前端框架的。

2.     所以他在进行数据操作或者拼接时，是支持以前${ }这种写法类似的功能的。

3.     需要注意的是，最好不要在{{ value }} 绑定数据的前面加上中文的 冒号（： ），可能会导致Wxml panner这个调试器失效，这个坑很大。刚开始，都以为是因为不支持${ }这种写法类似的功能而找原因未果，后面实在无奈，重写时一个一个尝试，才发现不是这个原因，小程序本身就是参考至JavaScript的，一般情况下不会抛弃前者的强大功能。现在似乎是没有这个问题了。

条件渲染：

1.     小程序控制组件的隐藏与显示，并没有完全参考解耦的设计思路，而是直接作为组件的属性字段写在组件中。他只接受true和false，并且他不是惰性属性，他始终被渲染。一般使用在view中作为条件渲染来使用。不要用CSS的概念来理解，否则你会找不到他的。

2.     For循环列表渲染有两个隐藏的属性，小程序隐式的指定默认值的变量名是item，下标是index。这个是需要知道的。

样式编辑：

1.     微信的Wxss是一套新的样式语言，引入了CSS大部分特性，但是对其做了扩充和修改。

2.     小程序对屏幕的宽度设置，任何手机屏幕宽度都是750rpx，该特性可以保证手机兼容性。

3.     但是需要注意的是，rpx在小分辨率手机上会有点毛病。

发起网络请求：|--wx.request(OBJECT)--|

1.     小程序发起的是HTTPS请求。

2.     在调试的时候开发者可以关闭请求检查，可以不用搭建HTTPS服务器。

3.     该设置在开发工具的左侧菜单项目的最底部，勾选不检查域名即可。

4.     参数发到服务器会强制转为String，因为写数字的时候要么用字符串写，否则请不要使用格式化代码命令，这会导致请求失败。

5.     URL中不能有端口。

6.     并发访问最大并发数量是5。

文件上传下载：|--wx.uploadFile(OBJECT)  wx.downloadFile(OBJECT)--|

1.     接收文件的接口请求类型必须是POST，因为上传文件方法指定为POST请求。

2.     并发限制最大为10。（下载同）

打开相册选择本机图片：|--wx.chooseImage(OBJECT)--|

1.     调用该函数成功后，在回调函数中，得到的缓存文件路径可以使用，刚开始看到的wxfile：****** 这种形式以为需要解析才可以使用，实际上是不需要的，可以直接使用。

预览图片：|--wx.previewImage(OBJECT)--|

1.     预览图片只需要制定想要预览的图片的路径数组即可。

选择地图位置：|--wx.chooseLocation(OBJECT)--|

1.     在使用上，写一个成功的回调函数，获取返回的数据即可。

获取设备信息：|--wx.getSystemInfo(OBJECT)--|

1.     编写成功的回调函数，获取相关数据即可。

2.     能够获取到的信息如下：

3.     手机型号

4.     设备像素比例

5.     窗口宽度（可见区域的宽度）

6.     窗口高度（可见区域的高度）

7.     微信设置的语言

8.     微信的版本号

9.     手机的操作系统版本

10.  客户端平台（安卓/苹果等）

用户交互：

说明几点。既然是与用户交互，那么在设计上越人性化越好。所以，在调用各种函数的时候，最好在失败的回调函数里面加上提示。某些特殊操作比如上传图片等也可以在成功回调里面加入提示|--wx.showToast(OBJECT)--|。程序除了问题应该告诉用户，程序出问题了，给出友好提示。你可以选择重新尝试该操作，或者选择其他操作。再者，上传图片成功的提示是告诉用户，我这个操作已经完成了，你可以继续操作或者点击完成。以免发生错误。但是需要说明的是，这个函数只能设置2种图标。并不好用。

|--wx.showModal(OBJECT)--|敏感操作时，可以写模态弹窗来与用户交互，让用户再次确认是否执行该操作。以免造成一些无法返回或者取消的误操作。

|--wx.showActionSheet(OBJECT)--|在结果可预知的情况下，可以使用显示操作菜单这个选项，把他妙用一下，变成一个快速填充器。减少用户输入，并能够保证填充数据规范化，格式化。有利于数据保存。

导航：

跳转到某个页面：|--wx.navigateTo(OBJECT)--|

1.     这个小程序规定页面深度最多只能是5层。

Canvas绘图：

1.     Draw函数是有参数的，只是默认参数为false。如果不给的参数，会覆盖掉上一次的绘画。

2.     使用fill（）函数填充是，如果被填充的点阵没有闭合，该函数会先调用lineTo函数闭合该点阵，让他成为一个封闭区间，然后进行填充。

3.     DrawImage（）函数，在访问图片资源时，以流的形式访问，且当没有使用Draw（false）函数重绘画板的时候，该流不会关闭，因此，无法在一个画板内请求多个相同的图片。流没有被正确关闭时，其他资源无法对其进行访问。

开放接口：

1.     登录接口：调用该接口后写一个成功的回调函数来获取一个用户CODE。然后通过CODE去请求用户的OPEN_ID和SESSION_KEY。在回调函数里面写请求的时候，必须以完整地址方式拼接请求。然后在成功的回调函数里面操作和保存OPEN_ID和SESSION_KEY。

2.     支付接口：支付接口的字段由后台返回，后台按照微信的统一下单接口以及微信公众号支付接口的方式进行代码编写。

小程序单页面分享二维码：

该二维码能够带参数，非常便利。但是每个小程序的终生二维码生成数量限制为10万个。