微信小程序如何引用外部js,外部样式,公共页面模板


Posted in Javascript onJuly 23, 2019

小程序引用外部js

//封装的函数
function GetUserInfo2018() {
 console.log("获取用户信息8888")
}
 
function count(str) {
 console.log(str)
}
 
//转化成小程序模板语言 这一步非常重要 不然无法正确调用
module.exports = {
 GetUserInfo2018: GetUserInfo2018,
 count: count
};
 
/*其它页面调用
 var common = require("../common/common.js");
 common.GetUserInfo2018();
 common.count("hehe");
*/

小程序引用外部css

/*
app.wxss是全局样式,作用于每一个页面,
而page下的每一个的wxss文件只作用于当前页面,并对全局样式中的相同属性会覆盖 
*/
@import "../../app.wxss";
/**index.wxss**/
.userinfo {
 display: flex;
 flex-direction: column;
 align-items: center;
}
 
.userinfo-avatar {
 width: 128rpx;
 height: 128rpx;
 margin: 20rpx;
 border-radius: 20%;
}
 
.userinfo-nickname {
 color: #aaa;
}
 
.usermotto {
 margin-top: 200px;
}

小程序引用公共页面

1、不带参数

首先在pages文件夹中新建一个template文件夹,文件夹中新建一个template.wxml文件,代码如下

<!--template.wxml-->
<template name="msgItem">
 <view>
  <text>This is template.wxml文件,我是一个模板</text>
 </view>
</template>

然后我们书写我们所要调用template的页面index.wxml

<!--index.wxml-->
<!-- 声明需要使用的模板文件 -->
<import src ="../template/template.wxml"/>
<template is="msgItem"/>

2、带参数

首先,修改template.wxml文件,我们给模板添加三个字段,修改后代码如下

<template name="msgItem">
 <view>
  <text>This is template.wxml文件,我是一个模板</text>
  <view>
   <text> {{index}}: {{msg1}} </text>
   <text> {{msg2}} </text>
  </view>
 </view>
</template>

接下来我们在index.wxml中传递模板中所需要的三个参数,修改后的代码如下:

<!--index.wxml-->
<!-- 声明需要使用的模板文件 -->
<import src ="../template/template.wxml"/>
<view>This is index.wxml</view>
<template is="msgItem" data="{{index:1,msg1:'msg1数据',msg2:'msg2数据'}}"/>

3、列表item模板

接下来我们就通过一种常见的情况列表数据来使用模板,增加对模板的认知,直接上修改过的代码:

//index.js
Page({
 data: {
  list:[
   { name: '张三', age: 15 },
   { name: '李四', age: 25 },
   { name: '王五', age: 18 },
   { name: '赵六', age: 19 },
  ]
 }
})
<!--index.wxml-->
<!-- 声明需要使用的模板文件 -->
<import src ="../template/template.wxml"/>
<view>This is index.wxml</view>
<view wx:for="{{list}}">
  <template is="msgItem" data="{{name:item.name,age:item.age}}"/>
</view>
<!--template.wxml-->
<template name="msgItem">
 <view>
  <text> name: {{name}} </text>
  <text> age: {{age}}</text>
 </view>
</template>

4、调用不同的模板

有时候,我们有这样的需求,那就是同一个列表中,item数据不同,可能他的样式也是有很大的区别,所以我们使用的模板也会对应不相同,接下来我们就来实现这样需求的小Demo:

首先修改了一下template.wxml,原本该文件中只有一个template,现在我们创建了两个,新增的template仅仅多了一行代码,当然了实际开发中,需求会比这个难很多,在这里只是为了实现Demo。

<!--template.wxml-->
<template name="msgItem">
 <view class="template_style">
  <text> name: {{name}} </text>
  <text class="template_age_style"> age: {{age}}</text>
 </view>
</template>
<template name="msgItem2">
 <view class="template_style">
  <text> name: {{name}} </text>
  <text class="template_age_style"> age: {{age}}</text>
  <text>我是一个未成年</text>>
 </view>
</template>

接下来我们在index.wxml中通过age字段调用不同的模板:

<!--index.wxml-->
<!-- 声明需要使用的模板文件 -->
<import src ="../template/template.wxml"/>
<view>This is index.wxml</view>
<view wx:for="{{list}}">
  <template is="{{item.age >= 18 ? 'msgItem' : 'msgItem2'}}" data="{{name:item.name,age:item.age}}"/>
</view>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 两个窗体之间传值实现代码
Sep 25 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
js css自定义分页效果
Feb 24 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
详解Vue中的基本语法和常用指令
Jul 23 #Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 #Javascript
node.js express框架简介与实现
Jul 23 #Javascript
js微信分享接口调用详解
Jul 23 #Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 #Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 #Javascript
微信小程序 网络通信实现详解
Jul 23 #Javascript
You might like
php PDO中文乱码解决办法
2009/07/20 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
javascript html 静态页面传参数
2009/04/10 Javascript
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
angular5 httpclient的示例实战
2018/03/12 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
Python生成随机数的方法
2014/01/14 Python
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
如何使用repr调试python程序
2020/02/28 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
怎样写留学自荐信
2013/11/11 职场文书
租房合同协议书
2014/04/09 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
献爱心活动总结
2014/05/07 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL