快捷導(dǎo)航

微信小程序模板和模塊化用法實(shí)例分析

更新時(shí)間：2017年11月28日 08:59:47 作者：米心語(yǔ)

這篇文章主要介紹了微信小程序模板和模塊化用法,結(jié)合實(shí)例形式分析了微信小程序中的模板與模塊化概念與簡(jiǎn)單使用技巧,需要的朋友可以參考下

本文實(shí)例講述了微信小程序模板和模塊化用法。分享給大家供大家參考，具體如下：

template

模板，在定義的時(shí)候使用name屬性，如以下聲明方式

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

模板不能直接在界面上顯示，需要調(diào)用的時(shí)候才能顯示出來(lái)，調(diào)用的時(shí)候需要使用is屬性來(lái)說(shuō)明調(diào)用的是哪個(gè)模板，并且傳參的形式可以有多種

<!-- 直接給模板里面用到的字段賦值 -->
<template is="mytemp" data="{{names:'aaa', add:'bbbb'}}"></template>
<!-- 通過給模板賦值對(duì)象來(lái)調(diào)用-->
<template is="mytemp" data="{{...person}}"></template>
<!-- 通過給模板賦值數(shù)組里面的對(duì)象來(lái)調(diào)用-->
<template is="mytemp" data="{{...persons[0]}}"></template>
<template is="mytemp" data="{{...persons[1]}}"></template>

模塊化

我們可以將一些公共的代碼抽離成為一個(gè)單獨(dú)的 js 文件，作為一個(gè)模塊，微信官方文檔給的說(shuō)明是需要exports和require來(lái)配套使用，需要exports來(lái)聲明供外部調(diào)用，使用的時(shí)候需要require來(lái)引用下，我看有的視頻說(shuō)的是如果使用require調(diào)用的時(shí)候需要本地下載node.js，反正我是下載了，如果使用的時(shí)候有問題就下載下吧。我創(chuàng)建了一個(gè)common.js格式如下：

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

在用到的時(shí)候可以用如下方式：

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

此外，本站前面一篇文章微信小程序模塊化詳細(xì)介紹也對(duì)模塊化做了較為深入淺出的介紹，感興趣的朋友可以參考一下。

希望本文所述對(duì)大家微信小程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

微信小程序動(dòng)態(tài)添加和刪除組件的現(xiàn)實(shí)
這篇文章主要介紹了微信小程序動(dòng)態(tài)添加和刪除組件的現(xiàn)實(shí)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
JavaScript基于對(duì)象去除數(shù)組重復(fù)項(xiàng)的方法
這篇文章主要介紹了JavaScript基于對(duì)象去除數(shù)組重復(fù)項(xiàng)的方法,結(jié)合實(shí)例形式分析了javascript數(shù)組去重的操作步驟與具體實(shí)現(xiàn)技巧,需要的朋友可以參考下
2016-10-10
ionic2 tabs 圖標(biāo)自定義實(shí)例
這篇文章主要介紹了ionic2 tabs 圖標(biāo)自定義,需要的朋友可以參考下
2017-03-03
List the Codec Files on a Computer
List the Codec Files on a Computer...
2007-06-06
Javascript利用canvas繪制兩點(diǎn)間曲線和箭頭
這篇文章主要為大家詳細(xì)介紹了Javascript如何利用canvas實(shí)現(xiàn)在兩點(diǎn)間繪制曲線和矩形,并且在矩形中繪制文字,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-10-10
JavaScript中的數(shù)據(jù)劫持和數(shù)據(jù)代理使用
文章主要介紹了數(shù)據(jù)劫持（Object.defineProperty）和數(shù)據(jù)代理（Proxy）兩種方式在JavaScript中的應(yīng)用,并通過生活中的例子來(lái)詳細(xì)解釋它們的工作原理和使用場(chǎng)景,文章還對(duì)比了兩種方式的優(yōu)缺點(diǎn),并指出了它們?cè)赩ue.js中的應(yīng)用
2025-02-02
js實(shí)現(xiàn)聊天對(duì)話框
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)聊天對(duì)話框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
JavaScript實(shí)現(xiàn)文本相似度對(duì)比
這篇文章主要介紹了JavaScript實(shí)現(xiàn)文本相似度對(duì)比，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-06-06
淺談Axios去除重復(fù)請(qǐng)求方案
本文主要介紹了Axios去除重復(fù)請(qǐng)求方案，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
JS實(shí)現(xiàn)點(diǎn)擊圖片在當(dāng)前頁(yè)面放大并可關(guān)閉的漂亮效果
點(diǎn)擊圖片在當(dāng)前頁(yè)面放大的漂亮效果實(shí)現(xiàn)方法有很多，在本文將為大家介紹下使用Lightbox JS是如何實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過
2013-10-10