One-week summary of WeChat mini program development

Y2J
Release: 2017-04-18 10:50:15
Original
2202 people have browsed it

The following is a summary of the week of WeChat applet development. I hope it will be helpful to students on the PHP Chinese website.

Editor

I use vscode directly (the same applies to other editors, and I still use WeChat development tools for preview), and syntax highlighting will Set wxml to html and wxss to css

"files.associations": { "*.wxss": "css", "*.wxml": "html" }
Copy after login

You can also install mini program related plug-ins

Start writing code

  • First, you need to read the WeChat mini program documentation (Framework, components andAPI) in full to facilitate searching later.

  • view component corresponds to p

  • #text in html and corresponds to selector in span

  • wxss Only supports element, #id, .className, ::after, ::before

##Public component

project Create new components in the directory, follow a similar directory structure like pages

, and put the template, style and js file of each component in the same folder

One-week summary of WeChat mini program development

mergePage

  • Loading of components

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

Use the mergePage method to register all component methods and page

eventsto the page object

  • How to write components

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

You can use this.setData in the component to update page data, or register onLoad, onShow and other page events, the last parameter of mergePage 's event will be called first.

  • mergePage source code

/** * 合并 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 >= 0; 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; }
Copy after login

es 6

Arrow function,Function parametersDefault value and analytical structure
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(...) } })
Copy after login

Some function parameters can also use default parameters directly.

ExtensionOperatorand object attribute abbreviation

When passing data parameters to template, you can use object attribute abbreviation, such as

Copy after login

In this way,

variablescan be used in the template for allkeyof the obj object, as well as id and name

templateString

You can directly and conveniently use the es 6 template string in the applet

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

More es 6 features

Other Notes

  • wx.showToast icon only supports "success" and "loading", and the error prompt must be customized

  • If the variables in the template have no value, please check whether the data is passed in.

  • The development tool (v0.10.102800) can use the following method to add an interface to request a domain name. Unfortunately, it cannot be used in WeChat.

// 放到 app.js 前面 wxConfig.projectConfig.Network.RequestDomain.push('https://weapp.juanpi.com');
Copy after login

  • The JS of all pages will be executed immediately when starting, instead of being executed when the page is opened, so some code is written globally It should be placed after onLoad as much as possible. Here is the loaded code from

    Debuggingsource:

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

The above is the detailed content of One-week summary of WeChat mini program development. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!