微信小程序模块化开发 include与模板开发 template

微信小程序开发交流qq群 173683895

承接微信小程序开发。扫码加微信。

正文：

1. include 是引用整个wxml文件，我通常会配合js，css一起使用；

使用场景，需要封装事件和微信 api 的公共模块。

2.template ，模板的引用，引用单个template组件，template内可以镶入其它组件

使用场景：公共的组件，只负责渲染，可以绑定事件，事件函数需要写在引用它的页面的js

include 示例demo：

<!--pages/model/include.wxml-->
<view class='include'><view style='text-align: center;'>include </view><view>{{include_data}}</view><button style='margin-top:30rpx;' bindtap='is_click'>btn_click</button>
</view>

// pages/model/include.js
function init(){var that =this;//模块内设置datathis.setData({include_data:'include_data'})// 模块内事件demothis.is_click = function () {// 模块内的引用微信apiwx.showToast({title: '模块内的引用微信api',icon:'none'})// 模块内逻辑判断if (that.data.include_data == 'include_data') {that.setData({include_data: '点击事件后include_data被修改了'})} else {that.setData({include_data: 'include_data'})}}
}
module.exports={init:init
}

wxss

/* pages/model/include.wxss */
.include{height: 300rpx;padding: 35rpx;background: cornflowerblue
}

在页面引用：

<!--index.wxml--><!-- include的使用 -->
<include src="../model/include"/>

wxss

/**index.wxss**/
@import "../model/include.wxss";

//index.js
var is_include = require('../model/include.js')
Page({onLoad:function(){is_include.init.apply(this,[]);}
})

apply 作用，让导入的is_include文件内init函数继承当前页面的page对象。详细介绍与使用方式点击打开链接

效果：

template 示例demo

<!--pages/model/model_template.wxml-->
<template name='model_template'><view class='model_template'><view style='text-align: center;' bindtap='is_click'>template </view><view>{{demo_data}}</view><view>{{a}}</view></view>
</template>

wxss

/* pages/model/model_template.wxss */
.model_template{height: 300rpx;padding: 35rpx;margin-top: 30rpx;background: antiquewhite
}

引用页面的写法：

<!--index.wxml--><!-- template的引用 -->
<import src='../model/template.wxml' />
<template is="model_template" data="{{demo_data,...obj}}"/>

wxss

/**index.wxss**/
@import "../model/template.wxss";

//index.jsPage({data: {demo_data:'hello template',obj: { a: 'obj_a', b: 'obj_b'}}
})

效果图

demo目录结构图：

微信小程序模块化开发 include与模板开发 template相关推荐

分享一个微信小程序编辑页面的WXML模板
分享一个微信小程序编辑页面的WXML模板最近在进行微信小程序开发的时候经常会碰到编辑页面的搭建,大致格式如图所示: 顶部:返回按钮和确认按钮,在中间还可以自行加上一些别的元素. 中间部分:编辑的标题 ...
微信小程序：商城系列专辑（开发指南+精品Demo）
商城开发指南: 微信小程序商城模块 | 链接使用zanui开发小程序微商城(模板组件的开发规范)| 链接 ecshop商城开发:用户信息的获取和缓存,地址信息的缓存 | 链接微信小程序商城 - 基 ...
php阅读器开发,微信小程序阅读器的简单实例开发
这篇文章主要介绍微信小程序阅读器的简单实例开发的相关资料,需要的朋友可以参考下今天和朋友聊天说到小程序,然后看在看书,然后我们就弄了个小读书的demo,然后现在分享一下. 一.先来上图: 首先先说下 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（十一）：开发小程序设置功能
文章目录前言一.功能说明二.设置界面代码实现 1.创建界面Page 2.WXML 3.JS 4.WXSS 三.参数控制逻辑代码实现 1.自动跳转卡片 2.自动播放声音专题文章链接前言案例的 ...
学习成长之路（初章三个月建成微信小程序商城、ArcEngine C# GIS开发入门）
学习成长之路(初章 ) 三个月建成微信小程序商城 .ArcEngine C# GIS开发入门自我简介先简单介绍一下,我是Domen,是一个彻彻底底的新手 . 大一大学大一没好好学习,搞这搞那 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（四）：搭建服务端数据库
文章目录前言一.连接主机数据库二.创建数据表结构三.准备测试数据专题文章链接前言做完了前面的注册申请工作,今天我们开始进行程序的开发. 这篇文章,我们要完成的是服务端数据库表的创建. 一 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（八）：开发小程序卡片类型呈现功能
文章目录前言一.功能说明二.代码实现 1.创建主界面Page 2.WXML 2.JS 3.WXSS 4.合法域名校验 5.图片缓存刷新问题的解决小结专题文章链接前言本篇文章,将对照专题案 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（一）：准备开始
文章目录前言案例说明专题文章链接前言作为一个程序开发的老鸟,有时候想使用微信小程序,开发实现一些实用的小功能.由于小程序往往需要有后台数据的支持,所以一般还需要搭建一个Server服务器,来 ...
对战微信小程序，探究快应用的开发之路【一】
最近华为牵头国内几大厂商推出了Quikapp快应用,与微信小程序展开了入口之争,作为走在时代最前沿的程序猿,不了解一下,不动手操作一下,都对不起时代赋予我们的责任感了.来,跟我一起来探究探究快应用的开 ...
分享微信小程序资讯类仿LOL盒子开发
分享微信小程序资讯类仿LOL盒子开发一.主要功能联盟盒子微信小程序功能分为管理员和非管理员功能.系统拥有多个非管理员用户,管理员用户仅有一个角色,对于管理员而言,管理员一般拥有操作用户信息比如更改 ...

微信小程序模块化开发 include与模板开发 template

承接微信小程序开发。扫码加微信。

正文：

include 示例demo：

template 示例demo

微信小程序模块化开发 include与模板开发 template相关推荐

最新文章

热门文章