小程序通过模板引入视图,样式,JS

刚开始写小程序,很多内容确实还不是很熟悉,所以遇到什么就总结一下吧,今天遇到的问题是用模板把其他的界面引入之后,关于样式和JS的引入操作,网上资料很多,但是把基本上都是从官方文档上复制过来,跟没有一样.

1.模板的写法和引入

首先在模板文件里,先写一个组件template,这个组件没什么含义,就是告诉小程序,这块是一个模板而已,然后要给模板加一个name属性,要来标注template,页面也是通过name来区分template.

<template name="header">
    <view >测试</view>
</template>

写完之后,在添加模板的页面,通过import来引入,src指定template文件的路径,然后通过template把模板文件内容加载进来,通过is属性和模板的name进行比对,相同即可,data是通过父级页面向模板页面进行数据传输,数据通过父级页面的data来保存,如果内容多,就单独写一个json,把json传过去,内容少,像我这个,.就把对应data的那对键值对传过去就行,这样就模板就引入了

<import src="/pages/header/header.wxml" />
<template is="header" data="{{isShowXX}}"></template>

import 引入的时候有作用域问题,C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。
还可以通过include,不过我没用,好奇就自己研究吧

2.样式的引入

在父级文件的.wxss文件顶部引入模板文件的样式

@import "/pages/header/header.wxss";

网上有人说引入用@import url()来写,哎,赖我没仔细看官方文档,这种写法是错的,不识别

3.JS方法的引入

模板页面可以不写Page的注册,只要把对应方法给实现了就行,然后通过module.exports方式把对应的函数输出出来就行,这是我模板对应的.js文件

function showXX(ev){
    this.setData({
        isShowXX:"block"
    })
}
function closeXX(){
    this.setData({
        isShowXX:"none"
    })
}
module.exports.showXX = showXX;
module.exports.closeXX = closeXX;

在父级的.js文件引入

var header = require("../header/header.js");
Page({
  data:{
    isShowXX:'none'
  },
  closeXX:header.closeXX,
  showXX:header.showXX
})

然后通过header找到对应模块的方法,对父级的key进行赋值,这样点击模块的事件才会响应,实现的是某个页面的隐藏和显示

4.隐藏界面

因为小程序里没有window,document等对象,所以没办法用DOM的方式来实现效果,就只能通过data的数据的变化,来实现这个效果

 <view id="XX" style="display:{{isShowXX}}"></view>

通过点击之后修改data里isShowXX的值来实现,这种演示修改写在行间

最后编辑于：2017.11.27 10:41:59