小程序开发指南-优快云博客

本文链接：https://blog.youkuaiyun.com/JackJia2015/article/details/85683216

1.网络请求问题：强制要求请求全部为https

2.网络请求问题：测试环境可以使用http协议

由于小程序开发时域名需要在公众平台备案
所以我们学习测试时:点击开发工具右上角“详请”--勾选“不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书”即可在正常网络环境中测试
在这里插入图片描述

3.企业类型帐号需支付300元认证费或者用公司账号向腾讯公司打款认证。
政府、媒体、其他组织类型帐号，必须通过微信认证验证主体身份

4.公众号关联小程序

关联规则：
所有公众号都可以关联小程序。
一个公众号可关联10个同主体的小程序，3个不同主体的小程序。
一个小程序可关联500个公众号。
公众号一个月可新增关联小程序13次，小程序一个月可新增关联500次。

5.待续

5.小程序有些组件依赖于node.js开发环境，建议电脑安装一下node.js开发环境
安装教程：https://blog.youkuaiyun.com/JackJia2015/article/details/84101036

6.小程序创建页面的.wxml、.js、.wxss、.json四个文件必须具有相同的路径与文件名

7.小程序允许上传的文件格式
程序文件格式： js、json、wxml、wxss
图片格式：png、jpg、jpeg、gif、svg
数据格式：wxs、json
文件个数：cer
音频格式：mp3、aac、m4a、wav、m4a、silk
视频格式：mp4

8.json的配置文件不可以写注释,而且标点符号要求很严格，所有符号需要英文符号，配置参数键值最后一个项不能加逗号

9.tabBar 底部导航栏,如果配置，只能配置最少2个、最多5个 tab

10.获取用户位置信息的官方声明
2019年1月14日起新提交发布的版本将会受到此调整的影响。需要各位开发者注意，2019年1月14日起新提交发布的版本若未填写地理位置用途说明，则将无法正常调用地理位置相关接口，请及时填写地理位置用途说明。该调整策略在微信客户端 7.0.0 版本生效。另外，考虑到兼容性等问题，在微信客户端 7.0.0 版本以下的环境中不受此策略影响。

解决方案：
需要在App.json配置

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
}

11.页面.json中配置项会覆盖 app.json 的 window 中相同的配置项。

12.控制页面整体不能上下滚动的disableScroll只在页面配置中有效，无法在 app.json 中设置

13.小程序框架的逻辑层并非运行在浏览器中，因此 JavaScript 在 web 中一些能力都无法使用，如 window，document 等

14.如何区分前台、后台

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

15.获取全局变量注意问题

获取全局变量userInfo

const app = getApp()
console.log(app.globalData.userInfo)

注:
(1)不要在App.js 内的函数中调用 getApp()
(2)App.js 中，使用 this 就可以拿到 app 实例。

var that = this
console.log(this.globalData.userInfo)

(3)通过 getApp() 获取实例之后，不要私自调用生命周期函数。

16.setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

17.获取当前页面栈–getCurrentPages()

不要尝试修改页面栈，会导致路由以及页面状态错误。
不要在 App.onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。

18.navigateTo等多个值传值时一定要传加上JSON.parse()

传值端JSON.stringify(array),
接收端JSON.parse(options.array);

否则传过的将字符串的形式接收，无法正常解析

19.路由跳转相关问题

（1）navigateTo, redirectTo 只能打开非 tabBar 页面。
（2）switchTab 只能打开 tabBar 页面。
（3）reLaunch 可以打开任意页面。
（4）页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
（5）调用页面路由带的参数可以在目标页面的onLoad中获取。
（6）调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而redirectTo 方法则不会。所以只要navigateTo的跳转才可以使用wx.navigateBack方法

20.WXML数据绑定时要特别注意：不要直接写 checked=“false”，其计算结果是一个字符串，转成 boolean 类型后代表真值。

21.花括号和引号之间如果有空格，将最终被解析成为字符串

<view wx:for="{{[1,2,3]}} ">{{item}}</view>
等同于
<view wx:for="{{[1,2,3] + ' '}}">{{item}}</view>

22.列表wx:for中，如果项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input> 中的输入内容，<switch> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
如：
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
如不提供wx:key，会报一个 warning，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

23.（1）当 wx:for 的值为字符串时，会将字符串解析成字符串数组

<view wx:for="array">{{item}}</view>
等同于
<view wx:for="{{['a','r','r','a','y']}}">{{item}}</view>

（2）花括号和引号之间如果有空格，将最终被解析成为字符串

<view wx:for="{{[1,2,3]}} ">{{item}}</view>
等同于
<view wx:for="{{[1,2,3] + ' '}}">{{item}}</view>

24.wx:if vs hidden区别

<view wx:if="{{condition}}">True</view>
和
<view hidden="{{condition}}">True</view>
区别
wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。
wx:if 是惰性的，初始渲染条件为 false，框架什么也不做，只有在条件第一次变成真的时候才开始局部渲染。
hidden 则是组件始终会被渲染，只是简单的控制显示与隐藏。

所以wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

24.滚动视图scroll-view注意问题

请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
scroll-into-view 的优先级高于 scroll-top
在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部

25.小程序text文本注意问题

decode可以解析的有 < > & '
各个操作系统的空格标准并不一致。
组件内只支持嵌套。
除了文本节点以外的其他节点都无法长按选中。

例如：小程序开发如何在文本中插入连续空格
在这里插入图片描述
代码：
index.wxml

 <text space="emsp" decode="{{true}}">文&emsp;-&emsp;&emsp;本</text>

26.button注意事项

：button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
：bindgetphonenumber 从1.2.0 开始支持，但是在1.5.3以下版本中无法使用wx.canIUse进行检测，建议使用基础库版本进行判断。
：在bindgetphonenumber 等返回加密信息的回调中调用 wx.login 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login 刷新登录态。
：从 2.1.0 起，button 可作为原生组件的子节点嵌入，以便在原生组件上使用 open-type 的能力

27.input注意事项

confirm-type的最终表现与手机输入法本身的实现有关，部分安卓系统输入法和第三方输入法可能不支持或不完全支持。
请注意原生组件使用限制。
微信版本 6.3.30, focus 属性设置无效；
微信版本 6.3.30, placeholder 在聚焦时出现重影问题；
input 组件是一个原生组件，字体是系统字体，所以无法设置 font-family；
在 input 聚焦期间，避免使用 css 动画；
对于将 input 封装在自定义组件中、而 form 在自定义组件外的情况， form 将不能获得这个自定义组件中 input 的值。此时需要使用自定义组件的内置 behaviors wx://form-field。

28.textarea注意事项

请注意原生组件使用限制。
微信版本 6.3.30，textarea 在列表渲染时，新增加的 textarea 在自动聚焦时的位置计算错误。
textarea 的 blur 事件会晚于页面上的 tap 事件，如果需要在 button 的点击事件获取 textarea，可以使用 form 的 bindsubmit。
不建议在多行文本上对用户的输入进行修改，所以 textarea 的 bindinput 处理函数并不会将返回值反映到 textarea 上。

29.audio音频1.6.0 版本开始，该组件不再维护。建议使用能力更强的 wx.createInnerAudioContext 接口

30.live-player（实时音视频播放）和live-pusher（实时音视频录制）
暂只针对国内主体如下类目的小程序开放，需要先通过类目审核，再在小程序管理后台，“设置”-“接口设置”中自助开通该组件权限。

31.map地图注意事项

该组件是原生组件，使用时请注意相关限制
个性化地图能力可在小程序后台“设置-开发者工具-腾讯位置服务”申请开通。
covers 属性即将移除，请使用 markers 替代
个性化地图暂不支持工具中调试。请先使用微信客户端进行测试。
地图中的颜色值color/borderColor/bgColor等需使用6位（8位）十六进制表示，8位时后两位表示alpha值，如：#000000AA

32.canvas画布注意事项

canvas 标签默认宽度300px、高度150px
同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作
请注意原生组件使用限制。
避免设置过大的宽高，在安卓下会有crash的问题

33.web-view注意事项

navigationStyle: custom 对组件无效
非正式域名链接需要登录小程序管理后台配置业务域名。
网页内 iframe 的域名也需要配置到域名白名单。
开发者工具上，可以在组件上通过右键 - 调试，打开组件的调试。
每个页面只能有一个，会自动铺满整个页面，并覆盖其他组件。
网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。
在 iOS 中，若存在JSSDK接口调用无响应的情况，可在的 src 后面加个#wechat_redirect解决。
避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent

34.原生组件的使用限制
由于原生组件脱离在 WebView 渲染流程外，因此在使用时有以下限制：

原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。（后插入的原生组件可以覆盖之前的原生组件）
原生组件还无法在中使用。(基础库 2.4.4 以下版本，原生组件不支持在、、中使用)
部分CSS样式无法应用于原生组件，例如：
（1）无法对原生组件设置 CSS 动画
（2）无法定义原生组件为 position: fixed
（3）不能在父级节点使用 overflow: hidden 来裁剪原生组件的显示区域
原生组件的事件监听不能使用 bind:eventname 的写法，只支持 bindeventname。原生组件也不支持 catch 和 capture 的事件绑定方式。
原生组件会遮挡 vConsole 弹出的调试面板。
在工具上，原生组件是用web组件模拟的，因此很多情况并不能很好的还原真机的表现，建议开发者在使用到原生组件时尽量在真机上进行调试。