总结一个微信开发的过程实例

编辑器

我直接用 vscode（其它编辑器同理，预览还是用的微信开发工具），语法高亮将 wxml 设置成 html, wxss 设置成 css

 files.associations : {
 *.wxss : css ,
 *.wxml : html 
}

也可以安装小程序相关插件

首先需要完整看完微信小程序文档（框架，组件和 API），方便后面用到时查找。

view 组件对应 html 里的 p

text 对应 span

wxss 里选择器只支持 element, #id, .className, ::after, ::before

项目目录里新建 components ，按类似 pages 目录结构，将每个组件的模板，样式和 js 文件放在同一个文件夹

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

样式使用 @import 导入

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

组件的加载

const ErrorMsg = require( #39;../../../components/error-msg/error-msg #39;);
Page(util.mergePage({
 // 页面 Page 方法...
 onLoad() {
 // 可以直接在页面方法中调用 showErrorMsg 方法
}, ErrorMsg/* 更多组件也可以*/));

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

组件的编写方式

var errorTimer;
module.exports = {
 showErrorMsg(msg, cb) {
 clearTimeout(errorTimer);
 this.setData({
 errorMsg: msg
 errorTimer = setTimeout( () = {
 this.setData({
 errorMsg: false
 cb cb();
 }, 2000);
 // 可以在这里注册 `onLoad`，`onShow`等页面事件
}

组件里使用可以 this.setData 来更新页面数据，或者注册 onLoad ， onShow 等页面事件， mergePage 的最后一个参数的事件会最先调用。

mergePage 的源码

/**
 * 合并 Page 对象所有的方法及事件
 * 子对象不能使用 data 属性，请在 onLoad 中使用 setData 方法设置
function mergePage(dest, ...src) {
 let args = arguments;
 let eventsStack = {
 onLoad: [],
 onReady: [],
 onShow: [],
 onHide: [],
 onUnload: [],
 onPullDownRefresh: [],
 onReachBottom: [],
 // 保存所有的事件，最后一个参数的事件会最先调用。
 for(let name in eventsStack) {
 for(let i = args.length - 1; i i--) {
 args[i][name] eventsStack[name].push(args[i][name])
 Object.assign(...args);
 for(let name in eventsStack) {
 dest[name] = function() {
 for(let i = 0; i eventsStack[name].length; i++) {
 eventsStack[name][i].apply(this, arguments);
 return dest;
}

wx.request({
 complete: ({data= {}}) = {
 // 1. 因为 wx.request 返回的接口数据是在 data 属性里，这里我们只要 data 属性就行了，所以直接参数解析构
 // 2. 如果 failed，无 data 时，data 将为默认值 {}
 if(data.code !== 0) {
 // do something if request failed
 return;
 // 请求正常处理代码
 // 3. 因为用的箭头函数，回调里可以正常使用 this, 访问 Page 对象的方法
 // 比如 this.setData(...)
})

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

在给 template 传 data 参数时，可以使用对象属性简写，如

 template is= ... data= {{...obj, id: otherIdVariable, name}} /template 

这样 template 中可以使用变量为 obj 对象的所有 key，以及 id 和 name

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

let url = `${app.globalData.API_PREFIX}/cart/add`;

wx.showToast 图标只支持"success"、"loading"，错误提示得自定义

如果 template 里面的变量没值，请看 data 传进来没有。

开发工具（v0.10.102800）可以用下面方法添加接口请求域名，遗憾的是微信里不行。

// 放到 app.js 前面
 wxConfig.projectConfig.Network.RequestDomain.push( #39;https://weapp.juanpi.com #39;);

所有页面的 JS 会在启动时立即执行，而不是打开页面才执行，所以一些写在全局的代码应该尽量放到 onLoad 之后，下面是从调试 source 里看到加载的代码：

define( pages/index/index.js , function(require, module, exports, window,document,frames,self,location,navigator,localStorage,history,Caches,screen,alert,confirm,prompt,XMLHttpRequest,WebSocket ){ #39;use strict #39;;
var app = getApp();
var util = require( #39;../../../utils/util #39;);
var ErrorMsg = require( #39;../../../components/error-msg/error-msg #39;);
var AddressPicker = require( #39;../../../components/address-picker/address-picker #39;);
Page(util.mergePage({
 // 页面代码省略
}, AddressPicker, ErrorMsg));
//# sourceMappingURL=data:application/json;...
});require( pages/index/index.js )

【相关推荐】

1. 微信公众号平台源码下载

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

3. 微信开发之微信支付

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

以上就是总结一个微信开发的过程实例的详细内容，更多请关注php中文网其它相关文章！

微信app下载

微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！