https://blog.csdn.net/smartsmile2012/article/details/83414642

================小程序引用外部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>
复制代码
---------------------
作者:smartsmile2012
来源:CSDN
原文:https://blog.csdn.net/smartsmile2012/article/details/83414642
版权声明:本文为博主原创文章,转载请附上博文链接!

微信小程序引用外部js,引用外部样式,引用公共页面模板的更多相关文章

  1. 微信小程序引入外部js 方法

    步骤: 1.首先将外部js放在你指定的文件夹里(这都是废话...) 2.接下来 将该js文件中你要使用的方法给暴露出来 3.在您要使用的js中引入该js 4.使用暴露出来的方法 例子:使用md5加密 ...

  2. 微信小程序引入md5.js

    今天给大家安利一下微信小程序引入md5.js的方法,不多说 md5.js在下面 直接复制到项目的utils/md5.js即可 /* * A JavaScript implementation of t ...

  3. 从微信小程序到鸿蒙js开发【11】——页面路由

    目录: 1.router.push()&wx.navigateTo() 2.router.replace()&wx.redirectTo() 3.router.back()&w ...

  4. 从微信小程序到鸿蒙js开发【12】——storage缓存&自动登录

    鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口] 正文: 在应用开发时,我们常需要将一些数据缓存到本地,以提升用户体验.比如在一个电商的app中,如果希望用户登录成功后,下次打 ...

  5. 从微信小程序到鸿蒙js开发【13】——list加载更多&回到顶部

    鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口] 目录: 1.list加载更多 2.list回到顶部 3.<从微信小程序到鸿蒙js开发>系列文章合集 1.list加 ...

  6. 从微信小程序到鸿蒙js开发【15】——JS调用Java

    鸿蒙入门指南,小白速来!0基础学习路线分享,高效学习方法,重点答疑解惑--->[课程入口] 目录:1.新建一个Service Ability2.完善代码逻辑3.JS端远程调用4.<从微信小 ...

  7. 微信小程序结合原生JS实现电商模板(二)

    接 <微信小程序结合原生JS实现电商模板(一)>,在首页列表加入购物车到购物和模块增删数量,动态计算商品价格实现后,本次提交主要实现了商品详情(还不完善)简单页面,从商品详情页跳转到购物车 ...

  8. 原创:微信小程序+WEB使用JS实现注册【60s】倒计时功能

    1.效果图: 2.页面仅仅利用了JS的相关功能,包含:wxml.js.wxss 2.1wxml页面代码: <text>绑定手机</text> <form bindsubm ...

  9. 微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法

    前段时间开发了一款微信小程序,运行了也几个月了,在index.js中的onLoad生命周期里获取app.js中onLaunch生命周期中在接口里动态设置的globalData一直没有问题,结果昨天就获 ...

  10. 微信小程序引入外部组件 iView Weapp

    iview Weapp组件的使用方法: 1. 下载小程序组件库 (前提是你已经有了项目目录) 你可以直接去github把iView Weapp的代码下载下来,也可以用过npm来下载. github地址 ...

随机推荐

  1. HL7解析器

    最近做了关于医疗的项目,用了HL7协议,以下是解析的代码: HL7解析器: using System; using System.Text; using System.Xml; using Syste ...

  2. Jquery插件validate使用一则

    jquery.validate是一个基于jquery的非常优秀的验证框架,可以通过它迅速验证一些常见的输入,并且可以自己扩充自己的验证方法. 主要功能有: 验证url,email,number,len ...

  3. 117. 填充每个节点的下一个右侧节点指针 II

    Q: 给定一个二叉树 struct Node { int val; Node *left; Node *right; Node *next; } 填充它的每个 next 指针,让这个指针指向其下一个右 ...

  4. 种树-洛谷P1250(差分约束)

    传送门 令前缀和为s[i],则⼀一个要求等价于 s[r] - s[l - 1] >= x. 题中还有别的要求,包括 s[i] - s[i - 1] <= 1 和 s[i] - s[i- 1 ...

  5. vue中使用vue-i18n 一个简单的国际化操作

    1.安装:npm install vue-i18n --save-dev 2.在main.js文件中引入: import VueI18n from 'vue-i18n' Vue.use(VueI18n ...

  6. makefile的书写

    工作中会遇到makefile的书写,有必要做一些笔记.尽管网上有”万能模板“可以使用,但我觉得还是有必要从最基础的写起. 平常在windows下开发,不知道自己用过makefile,其实大部分IDE里 ...

  7. 洛谷P1064 金明的预算方案(01背包)

    题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间金明自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:“你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过NNN元钱就行” ...

  8. ASP.NET Core搭建多层网站架构【12-xUnit单元测试之集成测试】

    2020/02/01, ASP.NET Core 3.1, VS2019, xunit 2.4.1, Microsoft.AspNetCore.TestHost 3.1.1 摘要:基于ASP.NET ...

  9. Node.js 服务端处理图片

    Node 服务端处理图片 服务端进行图片处理是很常见的需求,但是Node在这一块相对来说比较薄弱.找了几个比较常见的模块来解决问题. gm GraphicsMagick for node 使用Open ...

  10. 「题解」「POJ1322」Chocolate

    目录 题目 原题目 简易题意 思路分析 代码 练习题 题目 原题目 点这里 简易题意 包裹里有无限个分布均匀且刚好 \(c\) 种颜色的巧克力,现在要依次拿 \(n\) 个出来放到桌子上.每次如果桌子 ...