About WeChat mini program templates and modular usage (detailed tutorial)

This article mainly introduces the WeChat mini program template and modular usage, and analyzes the template and modular concepts and simple usage techniques in the WeChat mini program in the form of examples. Friends in need can refer to it

This article describes the WeChat applet template and modular usage with examples. Share it with everyone for your reference, the details are as follows:

template

Template, use the name attribute when defining, as follows

<template name="mytemp">
 <view>
  name:{{names}} address:{{add}}
 </view>
</template>

The template cannot be displayed directly on the interface. It can only be displayed when it needs to be called. When calling, you need to use the is attribute to indicate which template is being called, and there are many ways to pass parameters.

<!-- 直接给模板里面用到的字段赋值 -->
<template is="mytemp" data="{{names:&#39;aaa&#39;, add:&#39;bbbb&#39;}}"></template>
<!-- 通过给模板赋值对象来调用-->
<template is="mytemp" data="{{...person}}"></template>
<!-- 通过给模板赋值数组里面的对象来调用-->
<template is="mytemp" data="{{...persons[0]}}"></template>
<template is="mytemp" data="{{...persons[1]}}"></template>

Modularization

We can extract some public code into a separate js file. As a module, the description given by WeChat official documentation is It needs exports and require to be used together. It needs exports to declare for external calls. When using it, require needs to be quoted. I saw some videos saying that if you use require to call, you need to download node.js locally. Anyway, I downloaded it. If you have any problems when using it, please download it. I created a common.js format as follows:

//引用url
require("url.js");
function log(str){
 console.log("log:" + str);
}
//暴露log方法
 module.exports.log = log;

When used, you can use the following method:

var common = require("../../common/common.js");
Page({
 click:function(){
  common.log("输出消息");
 }
})

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement delayed loading of non-first-screen images in JS

How to implement parasitic combined inheritance using JavaScript

How to implement the copy function using js code

How to implement the js class using tangram.js library

The above is the detailed content of About WeChat mini program templates and modular usage (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!