阅读 47

前端微信小程序入门(二)

模板

1.作用:定义可复用的页面结构(wxml,wxss),不包含js/json
2.语法:
    <template name="模板名称">
        <view>
            页面结构
        </view>    
    </template>
3.使用:
    第一步:在哪个页面使用,需要引入
      语法:<import src="路径" />
    第二步:在页面使用模板
      语法:<template is='模板名称' data="给模板中传递数据" />
    第三步:把wxss引入到页面中的wxss中
      语法:@import '模板文件的wxss路径'
4.特殊语法
    语法:... 是es6中的新语法,作用是展开对象,对象中的属性方法可以被直接访问到
    var books = {
        bookName: '西游记',
        bookAuthor: '吴承恩',
        bookPrice: '89.9'
    }
    ...books
        bookName: '西游记',
        bookAuthor: '吴承恩',
        bookPrice: '89.9'
复制代码

模块化

    1.作用:把共用js代码单独提取出来,封装成专门js文件
    2.定义语法:
           1.创建一个js文件,需要向外导出
           语法:module.exports.属性名 = 值
             module.exports={
                 key:value,
                 key:value
             }
           2.使用共用js,需要在相应的js文件中引入
            语法:var 变量名 = require('js路径')
           可以直接把数据设置到 data对象中,也可以在生命周期函数onLoad上把引入的数据绑定到data数据上
             语法: this.setData({
                    books: book.books
                     })
复制代码

小知识

在标签上绑定数据

  <view data-xx='数据'></view>
        通过自定义属性 data-变量名='值'
        
     使用存储的数据:
        事件对象:event.currentTarget.dataset.变量名
        
复制代码

当模板要绑定事件时

    2.模板文件上一般不绑定事件,哪个页面中需要有点击事件,就在哪个页面中添加。
      template标签上面不能绑定事件
      例如:可以在模板外面包裹一层<view>,把事件添加在view上
复制代码

页面跳转

        wx.navigateTo({
            url:"路径"
        })
        
        
复制代码

跳转页面时携带数据

       写法:
       "路径?key=value&key=value"
复制代码

页面要接收路径上带的数据

     onload生命周期函数中接收,在options参数上接受  
     
复制代码

文章分类
前端
文章标签