微信小程序开发实践教程

小程序因为微信提供了一些组件，所以微信中的一些经验非常好。对于开发，数据驱动的开发模式非常酷。

引言

实际上，它类似于VUE REACT的MVVM模式，专注于数据和逻辑。 小程序开发框架的目标是使开发人员能够以最简单，最有效的方式在微信中开发具有本机APP体验的服务。

该框架提供了自己的视图层描述语言WXML和WXSS，以及基于JavaScript的逻辑层框架，并在视图层和逻辑层之间提供数据传输和事件系统，使开发人员可以轻松地专注于数据和逻辑。

从实践中获得的经验

规则

1.当前打包的文件不能超过2M，否则无法上传到微信服务器。

小程序不支持的

1.不支持sass语法2.不支持窗口，文档，不能使用相关库，如jquery，PreventMoveOverScroll。

3.不支持使用svg标记进行直接开发。图像src可以是远程svg，也可以是background-image。但是你可以使用canvas标签（canvas pit：position absolute layer不能覆盖画布），你可以使用库：wx-charts（带有凹坑，放在app.js然后在页面中引用，找不到ringChart上面的函数，例如ringChart.addEventListener。直接引用页面中的库。）。

4.不支持阻止默认事件，不支持preventDefault。 5.没有br标签。 6.不支持表格表。 7.不能用于增加文字间距。 8.小程序 xxx.wxss文件font-face url不接受http地址作为参数，可以接受base64，这样你就可以先下载字体文件，转换为base64，然后引用。链接。

新特性

1.img标签替换为图像标签。 2.text标记识别\ n换行符，不能打包标签，会直接输出，有点类似于textarea。在3.小程序:中，nth-child（n）从0. 4.switch标签开始。但你不能改变风格的大小，因为旧的无线电标签很烦人。 5.picker标签。但是，这些选项不会在开发人员工具中循环，并且选项会在Android手机预览中循环播放。

6.滚动视图标记。带滚动条的盒子。要在进入页面时自动滚动到某个位置，可以使用滚动视图的滚动到视图属性，但必须在滚动视图存在后设置，特别是当您通过模板引用它时，例如使用模板的值和使用setData滚动到视图不会使滚动生效。

7.关于屏幕下拉：Android不会，iPhone会。可以通过配置解决：disableScroll Boolean false设置为true，页面整体不能上下滚动;仅在page.json中有效，无法在app.json中设置。链接。

8.模板标签模板的范围：模板有自己的范围，只能使用数据传入的数据。

9.在功能按钮上使用catchtap以防止冒泡

10.hidden参数，控制面具的武器

小窍门

1.关于下拉刷新设置page.json中的enablePullDownRefresh: trueonPullDownRefresh手动stopPullDownRefresh，否则它总是加载（加载）。

2.page的onload函数有参数选项来获取路径的查询

支付3.小程序和支付微信不是appid，后端新开发的订单界面是必需的

4.wxml最好在开发人员工具中编辑（带提示）。可以在熟悉的编辑器中编辑Js，wxss。

如果5.小程序中给出的新值未定义，则根本不会分配它，也不会覆盖以前的值。如：

app.setData（{isPaperCollected: finishedQuizList ['id'+ quizID] || false}）

6.通过多次使用Object.assign（{}）来解决数据也被模块化后无法深度复制数据的问题。 Object.assign不是深层副本。

7.在微信web开发人员工具中，请务必在action-> Settings->中检查“不要使用任何代理，在连接后直接检查网络”，否则始终报告“无法加载资源: net: ERR_NAME_NOT_RESOLVED”错误：链接

8.每个小程序页面也可以使用.json文件来配置此页面的窗口行为。页面的配置比app.json全局配置简单得多。它只是在app.json中设置窗口配置项的内容。页面上的配置项将覆盖app.json窗口中的相同配置项。页面的.json只能设置与窗口相关的配置项来确定该页面的窗口性能，因此不需要编写窗口密钥

9.data在页面中设置，而不是在app.js.不要在没有涉及渲染的情况下放入数据。

10.Page.prototype.setData（）更改数据并同时更新页面数据。 setData函数用于在更改相应this.data的值的同时将数据从逻辑层发送到视图层。直接修改this.data无效，无法更改页面状态，并会导致数据不一致。一次数据集不能超过1024kB。请尽量避免一次设置太多数据。

11.wx:如果是惰性的，如果初始渲染条件为假，则框架不执行任何操作，并且当条件第一次变为真时，本地渲染开始。

会话管理

微信的网络请求接口wx.request（）不携带cookie，这使得传统的基于cookie的会话管理不再适用。为了使服务处理微信小程序能够识别会话，我们的会话管理使用weapp-session-client。这需要服务器支持。基本原则是包装wx.request并在Header上使用特殊字段跟踪。

使用时遇到的问题：1.微信开发人员工具错误：未捕获的ReferenceError:未定义regeneratorRuntime原因是不支持Generator功能。解决方案：

微信开发工具关闭ES6到ES5真实解决方案，提供regeneratorRuntime

2.偏离主题：充分利用Promise这个项目后端处理会话管理要求在发送请求时不能使用相同的X-WX-Code发送所有头数据，RawData，Signature等，否则报告错误。因此，在使用weapp-session-client登录时，您必须等待登录返回，然后发送其他请求。 小程序在加载后立即立即执行app.js和page.js中的配置，但是wx请求是异步的，因此可以页面当请求开始执行时，app.js中的登录尚未完成，这将导致一个bug。可以用诺言来解决。

进阶

1.扩展微信小程序框架功能

2.问题：微信切换账号不会破坏小程序

3.检查问题的TLS版本http://www.dongcoder.com/detail-410653.html解决方案：微信开发人员工具检查开发时间不检查TLS版本或后端配置

4.蓝牙，振动呼叫

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。