• 原生小程序小话题——引用、模板

    实际上这一部分涉及到小程序的模块组合

    第一部分 wxss

    wxss因为有全局的app.wxss的存在，所以我暂时只知道一个@import形式的引入

    我在外部定义了css文件下写了一个another.wxss的文件

    1. 外部链接的内容
    2. .red{
    3.   color: red;
    4. }

    引入

    1. /* pages/page2/page2.wxss */
    2. /* 引入外部的样式 */
    3. @import"../../css/anthor.wxss"

    使用

    <view class="red">这行字应该是红色view>

    确实是红色

     第二部分 wxs

    我看来这就是个模块化使用的js文件，通过module.expose的方式暴露，里面可以写你的函数或者变量，具体和js是一样的，但是不支持es6的写法

    1.输出变量

    1. //1.wxs
    2. module.exports.name="huanfeng"
    3.  
    4. //2.wxs
    5. var sex="男"
    6. var age=18
    7. module.exports={
    8.   sex:sex,
    9.   age:age
    10. }

    2.require引入

    1. // 使用require在wxs中实现对其他wxs模块的访问
    2. var name=require("./1.wxs")
    3. var obj=require("./2.wxs")
    4. // 这里我要拼接出一个字符串
    5. module.exports.msg="我是"+name.name+",老子是"+obj.sex+"的,我今年"+obj.age+"岁"
    6.  
    7. //我在这个tool.wxs当中对两个文件中的变量进行引入，并拼接成了字符串

    3.在wxml的模板上进行使用

    1. <wxs module="tool" src="./wxs/tool.wxs"/>
    2. <view>{{tool.msg}}view>

    这里的tool就变成了wxs导出的对象名

    第三部分 wxml的模板和和引入

    1.标签

    这个标签类似于react当中的Fragment，相当于把一段html变成一个整体

    1. <block wx:for="{{2}}">
    2.   <view>爸爸view>
    3. <view>儿砸view>
    4. block>

    上面的写法就能让中间的部分循环两次

    2.