总结一个微信开发的流程示例（总结一个微信开发的流程示例图）

编辑

我直接用vscode(类似其他编辑器，预览版还是微信开发工具)，语法亮点设置wxml为html，wxss为css。

"files.associations & quot:{ & quot*.wxss & quot:& quotcss & quot，& quot*.wxml & quot:& quothtml & quot}也可以安装小程序相关的插件。

开始写代码，需要把微信小程序文档(框架、组件、API)看完整，以便以后查找。

视图组件对应于html中的p

文本对应于跨度

wxss中的选择器仅支持元素# id，.类名，::之后，::之前。

在公共组件项目目录下新建组件，按照类似于pages的目录结构，将每个组件的模板、样式、js文件放在同一个文件夹下。

模板可以直接使用或需要传递值+

使用@import导入样式。

Js使用require引入到页面中，然后使用下面的mergePage加载到page对象中。

加载mergePage组件

const ErrorMsg = require。#39;../../../components/error -msg/error -msg & amp；#39;);Page(util.mergePage({ // page方法...onLoad() {//可以直接调用page方法中的showErrorMsg方法}}，errormsg/*更多组件也可以*/)；

使用mergePage方法将所有组件方法和页面事件注册到Page对象。

如何编写组件

var错误计时器；module . exports = { showErrorMsg(msg，CB){ clear time out(error timer)；this . setdata({ error msg:msg })；error timer = setTimeout(()= & gt；{ this . setdata({ error msg:false })；cb & amp& ampCB()；}, 2000);}//可以在这里注册‘onLoad’和‘on show’等页面事件。您可以使用this.setData来更新页面数据，或者注册页面事件，如onLoad和onShow。将首先调用mergePage的最后一个参数的事件。

MergePage源代码

/* * *合并页对象的所有方法和event *子对象都不能使用data属性。请使用onLoad中的setData方法来设置*/函数合并页面(dest，...src) {let arguments =参数；let eventsStack = { onLoad: []，onReady: []，onShow: []，onHide: []，onUnload: []，onPullDownRefresh: []，onReachBottom: []，}；//保存所有事件，首先调用最后一个参数的事件。for(let name in events stack){ for(let I = args . length -1；我& gt= 0;{ args[I][name]& amp；& ampeventsStack[name]。push(args[I][name])} } object . assign(...args)；for(let name in events stack){ dest[name]= function(){ for(let I = 0；我& lteventsStack[name]。长度；i++) { eventsStack[name][i]。应用(这个，论据)；} } }返回dest}es 6箭头函数，函数参数默认值及解析结构wx . request({ complete:({ data = { } })= > {//1 .因为wx.request返回的接口数据在data属性里，我们这里只需要data属性，就可以直接解析参数结构// 2。如果失败，如果没有数据，数据将是默认值{} if(data.code！== 0) { //如果请求返回失败，则采取措施；}//请求正常代码处理// 3。因为有了箭头函数，这就可以在回调中正常使用，而访问Page对象的方法//比如这个。setdata(...)})

有些函数参数也可以直接使用默认参数。

将数据参数传递给模板时，可以使用扩展运算符和对象属性简写，例如

& lt模板是= & quot..."data = & quot{{...obj，id: otherIdVariable，name } } & quot& gt& lt/template & gt；

这样，所有带有obj对象变量的键，以及id和name都可以在模板中使用。

模板字符串小程序可以直接方便的使用es 6模板字符串。

let URL = ` $ { app . global data . API _ PREFIX }/cart/add `；

更多es 6功能请注意，wx.showToast图标仅支持“成功”和“加载”，以及错误提示的定制。

如果模板中的变量没有价值，请看数据是否传入。

开发工具(v0.10.102800)可以通过以下方式添加接口请求域名，可惜不能在微信中使用。

//放在app . js wx config . project config . network . request domain . push(&；#39;https://weapp . Juan pi . com & amp；#39;);

所有页面的JS都会在启动时立即执行，而不是在打开页面之后执行，所以有些全天下写的代码尽量放在onLoad之后。下面是从调试源加载的代码:

定义(&quotpages/index/index . js & quot；，函数(require，module，exports，window，document，frames，self，location，navigator，localStorage，history，Caches，screen，alert，confirm，prompt，XMLHttpRequest，web socket){ & amp；#39;使用严格的& amp#39;；var app = getApp()；var util = require(& amp；#39;../../../utils/util & amp；#39;);var error msg = require(& amp；#39;../../../components/error -msg/error -msg & amp；#39;);var address picker = require(& amp；#39;../../../components/address -picker/address -picker & amp；#39;);Page(util.mergePage({ //页面代码省略}，AddressPicker，error msg))；//# sourceMappingURL = data:application/JSON；...});要求(& quotpages/index/index . js & quot；)【相关推荐】

1.下载微信微信官方账号平台源代码。

2.总结微信小程序开发的UI布局技术。

3.微信开发的微信支付

4.值得一看的微信小程序开发经验总结。

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：总结一个微信开发的流程示例（总结一个微信开发的流程示例图） https://zhujicankao.com/113167.html