微信小程序模板和模块化用法实例分析

2024-09-28 16:51:48

本文实例讲述了微信小程序模板和模块化用法。分享给大家供大家参考，具体如下：

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，反正我是下载了，如果使用的时候有问题就下载下吧。我创建了一个common.js格式如下：

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

在用到的时候可以用如下方式：

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

此外，本站前面一篇文章微信小程序模块化详细介绍也对模块化做了较为深入浅出的介绍，感兴趣的朋友可以参考一下。

希望本文所述对大家微信小程序设计有所帮助。

微信小程序数据访问实例详解

先简单说一下,小程序的结构如图所示 1.每个视图(.wxml)只需要添加对应名字的脚本(.js)和样式(.wxss)就可以了,不需要引用,page下面的脚本以及样式都是继承至最外面的app.js , app.wxcss 2.脚本也就是.js文件,他有固定格式:page,是用于获取数据的 3.utils是用来放置数据接口的数据访问,如果懂点ajax,都不是问题,没啥好讲的微信小程序,因为IDE太烂了,如果代码再写得难以阅读,整个项目就很难维护了. 因为没有写过app,不知道在app中数据访问
微信小程序 input输入框控件详解及实例（多种示例）

微信小程序 input输入框控件今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. 首先主页面中将登录的样式进行了简单展示和使用, 代码如下:  <!--如果在同一个form表单中创建了多个input输入框,可以给给每个输入框,创建自己的 name="userName"属性,可以区别哪个输入框,并通过添
微信小程序-详解微信登陆、微信支付、模板消息

微信公众平台近日悄然开始内测微信小程序(微信公众号)功能,引来无数开发者和普通用户关注,微信支付的能力,是随着小程序的发布一并推出的,具有介绍如下: wx.login(OBJECT) 调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的会话密钥(session_key).用户数据的加解密通讯需要依赖会话密钥完成. OBJECT参数说明: success返回参数说明: 示例代码: //app.js App({ onLaunch: functio
微信小程序视图template模板引用的实例详解

微信小程序视图template模板引用的实例详解 WXML 提供两种文件引用方式import和include. include可以将目标文件除了的整个代码引入,相当于是拷贝到include位置 temlate.wxml <template name="tmp_data" > <view class="content">  <view class="author-date"> &
微信小程序教程之模块化

系列文章: 微信小程序教程之模块化微信小程序教程之注册页面微信小程序教程之注册程序文件作用域在JavaScript文件中声明的变量和函数只在该文件中有效:不同的文件中可以声明相同名字的变量和函数,不会互相影响. 通过全局函数getApp()可以获取全局的应用实例,如果需要全局的数据可以在App()中设置,如: // app.js App({ globalData: 1 }) // a.js // The localValue can only be used in file a.j
微信小程序（六）模块化详细介绍

模块化也就是将一些通用的东西抽出来放到一个文件中,通过module.exports去暴露接口.我们在最初新建项目时就有个util.js文件就是被模块化处理时间的 /** * 处理具体业务逻辑 */ function formatTime(date) { //获取年月日 var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() //获取时分秒 var hour = date.getH
微信小程序 template模板详解及实例

微信小程序 template模板详解及实例首先看一些官方的一些介绍. 模板:模板功能是通过对template 标签的属性 name="" 去创建不同模板,通过is="name的值"来使用. 通过上面两张图,大概能看出,使用模板可以为大量类似的布局带来便利.下面看一下我自己的一个Demo. 先放出效果图(数据来自聚合数据) 可以看到,除了选项个数的差别之外,其他布局是相同的. 下面的每一道题的模板. <template name="carItem&q
微信小程序 template模板详解及实例代码

微信小程序 template模板详解如下图,我在做华企商学院小程序的时候,课程搜索结果页和课程列表页结构是完全一样的,这时就非常适合使用模板来完成页面搭建.实现一次定义,到处使用. 模板一.定义模板 1.新建一个template文件夹用来管理项目中所有的模板: 2.新建一个courseList.wxml文件来定义模板: 3.使用name属性,作为模板的名字.然后在<template/>内定义代码片段. 注意: a.可以看到一个.wxml文件中可以定义多个模板,只需要通过name来区分: b
微信小程序传值取值的几种方法总结

微信小程序传值取值小程序里常见的取值有以下几种,一个完整的项目写下来,用到的概率几乎是100%. 列表index下标取值页面传值 form表单取值 1. 列表index下标取值实现方式是:data-index="{{index}}"挖坑及e.currentTarget.dataset.index来填坑即可 1.1 生成值 <image src="../../../images/icon_delete.png" /><text>删除&l
微信小程序模板和模块化用法实例分析

本文实例讲述了微信小程序模板和模块化用法.分享给大家供大家参考,具体如下: template 模板,在定义的时候使用name属性,如以下声明方式 <template name="mytemp"> <view> name:{{names}} address:{{add}} </view> </template> 模板不能直接在界面上显示,需要调用的时候才能显示出来,调用的时候需要使用is属性来说明调用的是哪个模板,并且传参的形式可以有多种
微信小程序rich-text富文本用法实例分析

本文实例讲述了微信小程序rich-text富文本用法.分享给大家供大家参考,具体如下: rich-text是一个新增的微信小程序插件,从基础库1.4.0开始,低版本需要做兼容处理 nodes属性可为Array和String类型,但推荐使用Array.由于String类型最终也会转为Array类型 nodes分为支持两种节点,分别为元素节点(type=node ,默认为元素节点)和文本节点(type=text) 元素节点 name 标签名 String 是支持部分受信任的HTML节点 attrs
微信小程序模板template简单用法示例

本文实例讲述了微信小程序模板template简单用法.分享给大家供大家参考,具体如下: 模板呢,就是为了方便你重复写一些代码而建立的,目前我指发现它的功能适合建立一些表格类型的数据, 比如,录入认得信息啥的(都有名字,年龄,性别啥的) 1. index.wxml代码 <view class="page"> <template name="aafa"> <view> <text> 姓名:{{name}} 年龄:{{age
微信小程序模板与设置WXML实例讲解

目录一.WXML模板语法--数据绑定二.WXML模板语法--事件绑定三.WXML模板语法--条件渲染 1.wx:if 2.结合<block>使用wx:if 3.hidden隐藏四.WXML模板语法--列表渲染 1.wx:for遍历数组 2.手动指定索引和当前项的变量名* 3.wx:key的使用一.WXML模板语法--数据绑定数据绑定的基本原则在 data 中定义数据在页面对应的.js文件中,把数据定义到data对象中,如下图在home页面中的home.js中定义home页面的d
微信小程序图表插件wx-charts用法实例详解

本文实例讲述了微信小程序图表插件wx-charts用法.分享给大家供大家参考,具体如下: 微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧,支持图表类型饼图.线图.柱状图 .区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个支持图标类型饼图 pie 圆环图 ring 线图 line 柱状图 column 区域图 area 雷达图 radar 如何使用? 1. 直接引用编译好的文件 dist/charts.js(js下载地址) .wxml
微信小程序module.exports模块化操作实例浅析

本文实例讲述了微信小程序module.exports模块化操作.分享给大家供大家参考,具体如下: 文件目录如上图: 看到网上写的模块化都比较复杂,写个入门版的好让大家理解理解 common.js var studentList = [ { name: "xiaoming", age: "22", hobby: "sleep" }, { name: "xiaohong", age: "22", hobb
微信小程序之事件交互操作实例分析

本文实例讲述了微信小程序之事件交互操作.分享给大家供大家参考,具体如下: 微信小程序-点击事件什么是事件? 指点击,触摸,按下,滑动,松开,等一系列对手机屏幕操作. 下面代码所要呈现的效果就是给两个按钮一人一个ID然后点击谁,在上面显示信息那就显示点击了谁,点击了多少次,这多少次没有分开啊,次数是点击他两的总和.下面另一代码是分开的,各计各的. 1. 在index.wxml 中设置点击事件(测试时需要删除注释部分) <view class="page"> //点击后在这
微信小程序模板（template）使用详解

本文为大家分享了微信小程序模板template的使用方法,供大家参考,具体内容如下效果图以MUI的实例首页和列表页面为实例通过上图,可以看出两个页面的列表部分很相近,以每行作为单元制作模板. template模板 1.模板存放的位置以及使用模板页面存放的位置 template模板的WXML  <template name="listNone"> <view class="tui-menu-list">
微信小程序picker组件简单用法示例【附demo源码下载】

本文实例讲述了微信小程序picker组件简单用法.分享给大家供大家参考,具体如下: picker滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器(mode=selector),时间选择器(mode=time),日期选择器(mode=date),默认是普通选择器. 具体功能说明如下: 普通选择器:mode=selector 属性名类型默认值说明 range Array [] mode为selector时,range有效 value Number 0 mode为selecto

微信小程序模板和模块化用法实例分析

相关推荐

随机推荐