微信小程序模板和模块化用法实例分析
网络编程 2021-07-04 17:33www.168986.cn编程入门
这篇文章主要介绍了微信小程序模板和模块化用法,结合实例形式分析了微信小程序中的模板与模块化概念与简单使用技巧,需要的朋友可以参考下
本文实例讲述了微信小程序模板和模块化用法。分享给大家供大家参考,具体如下
template
模板,在定义的时候使用name属性,如以下声明方式
<template name="mytemp"> <view> name:{{names}} address:{{add}} </view> </template>
模板不能直接在界面上显示,需要调用的时候才能显示出来,调用的时候需要使用is属性来说明调用的是哪个模板,并且传参的形式可以有多种
<!-- 直接给模板里面用到的字段赋值 --> <template is="mytemp" data="{{names:'aaa', add:'bbbb'}}"></template> <!-- 通过给模板赋值对象来调用--> <template is="mytemp" data="{{...person}}"></template> <!-- 通过给模板赋值数组里面的对象来调用--> <template is="mytemp" data="{{...persons[0]}}"></template> <template is="mytemp" data="{{...persons[1]}}"></template>
模块化
我们可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块,微信官方文档给的说明是需要exports和require来配套使用,需要exports来声明供外部调用,使用的时候需要require来引用下,我看有的视频说的是如果使用require调用的时候需要本地下载node.js,反正我是下载了,如果使用的时候有问题就下载下吧。我创建了一个mon.js格式如下
//引用url require("url.js"); function log(str){ console.log("log:" + str); } //暴露log方法 module.exports.log = log;
在用到的时候可以用如下方式
var mon = require("../../mon/mon.js"); Page({ click:function(){ mon.log("输出消息"); } })
,本站前面一篇文章也对模块化做了较为深入浅出的介绍,感兴趣的朋友可以参考一下。
希望本文所述对大家微信小程序设计有所帮助。
上一篇:基于vue2实现上拉加载功能
下一篇:基于Vue的移动端图片裁剪组件功能
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程