微信小程序如何引用外部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 相关文章推荐
IE和FireFox(FF)中js和css的不同
Apr 13 Javascript
javascript 写类方式之九
Jul 05 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
javascript简单事件处理和with用法介绍
Sep 16 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
jquery实现百叶窗效果
Jan 12 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
微信小程序scroll-view组件实现滚动动画
Jan 31 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 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
Zend 输出产生XML解析错误
2009/03/03 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
javascript实现拖放效果
2015/12/16 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
发布Angular应用至生产环境的方法
2018/12/10 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
JS实现分页导航效果
2020/02/19 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
基于Django的python验证码(实例讲解)
2017/10/23 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
服务行业口号
2014/06/11 职场文书
公司员工手册范本
2015/05/14 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
Python下opencv库的安装过程及问题汇总
2021/06/11 Python
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers