微信小程序学习记录

2018.7.14 早

昨天在慕课网买了教程，学了一下午，最后忘了总结，现在补上。

0.js文件中用Page()注册页面,里面是一个对象，对象里一个存放数据的data对象和各种事件，也可以自己定义函数

Page({
  /* 页面的初始数据*/
  data: {
  },
  /* 生命周期函数--监听页面加载*/
  onLoad: function (options) {
  
  }
})

1.wxml文件中的例如{{name}}所绑定的数据，小程序从哪里得到数据绑定到这个上面呢？

    答案是小程序总是会读取js文件里data对象里面的数据。

2.如果想动态加载数据到data里要怎么做呢？

    答案是用this.setData()将数据传到data里，如下面的示例，是在onLoad（）的时候将一个数组传到data里。这里注意必须要用this.setData()的方式，而不能直接给data赋值，想用this.data.name = newName给data加一个name属性是不可以的。

onLoad: function (options) {
   var newData = { name: "lixiangyu"};
   this.setData(newData)
  }

这样data相当于多了一个对象｛name: "lixiangyu"｝,页面就可以通过{{name}}加载数据。

3. wx:for

多个对象也可以传数组进去，然后通过wx:for来循环渲染。

onLoad: function (options) {
    var postList=[{a:1,b:2},{a:4,b:6}];
    this.setData(postList);
}

但此时是直接把一个数组赋过来了，data相当于多了一个数组，但这个数组还没有属性名，wxml里不能获取数据，那我们在this.setData()时给数组变成对象

this.setData({newData_key: postList});{newData_key: postList});

 

这样data中就相当于多了一个newData_key: [{a:1,b:2},{a:4,b:5}]。我们可以在wxml中调用了，{{newData_key.a}}、{{newData_key.b}},但因为是一个数组，我们要用循环的方式渲染的，这里用到了wx:for

 

<block wx:for="{{newData_key}}">
    自己的标签元素
</block>

 

<block></block>相当于一个括号，表示是这一块区域，没有其他效果。

 

 wx：for之后，此时当前对象就可以用item表示，获取某一值可以{{item.a}},对象的下标就可以用index表示{{index}},当然item和index是系统默认提供的，你也可以改成自己需要的名字

<block wx:for="{{newData_key}}" wx:for-item="item" wx:for-index="index">

4.标签中属性想设置为false的话，xxx="false"会把false当字符串，那一定为真。抱起来就可以了xxx=“{{false}}"

5.隐藏元素   wx:if ="{{false}}"

    <image wx:if ="{{false}}"  src="123.jpg" />则image元素就不显示在页面中。

    也可以绑定一个属性，然后在data里定义这个属性为false。

6.点击事件  bindtap(冒泡)   catchtap(非冒泡)

7.页面跳转。一级页面、二级页面、三级页面

   ①父子级页面跳转：wx:navigateTo({

    url: ""

})

    这种跳转后子页面会有返回键。这种跳转最多5次，小程序规定不能太深。

    ②同级页面跳转：wx:redirectTo({

    url: ""

})

     这种跳转没有返回键

  ③跳转到有Tab栏的页面，此时必须使用wx:switchTab({

   url:""

})

    注意这里函数参数都是一个对象。

8.从其他文件引用数据  module.exports = {}

  我们可以把之前js中那个对象数组放到一个作为数据的文件中（实际中应该是后台发送过来的数据），然后这个文件给提供接口。

    8.1.数据文件提供接口

var local_database = [{
    avatar: "/images/avatar/1.png",
    imgSrc: "/images/post/crab.png",
    date: "Sep 18 2017",
    title: "正是虾肥蟹壮时",
  },
  {
    avatar: "/images/avatar/2.png",
    imgSrc: "/images/post/bl.png",
    date: "Sep 18 2017",
    title: "比利·林恩的中场故事",
];
// 按住Alt+Shift+F可以快速格式化代码，使其排列规范

module.exports = {
  postList: local_database
}

   8.2.使用数据的文件获取接口 require 

    （注意，require时路径只能用相对路径，绝对路径报错）

var postsData = require('../../data/posts_data.js');


onLoad: function (options) {
    
    this.setData({
      newData_key: postsData.postList});
  },

9.模版<template> (复用的思想)

  9.1结构复用

        ①新建一个模版文件data-template.wxml，将原wxml中要作为模版的结构转移到这里，用<template>包裹住，并给这个模版取一个name（给模版取名，以后用模版的时候喊哪个名字就用哪个模版）

<template name="postItem">
  <view class="post-container">
      <view class="post-author-date">
        <image class="post-author" src="{{avatar}}"></image>
        <text class="post-date">{{date}}</text>
      </view>
  </view>
</template>

        ②原wxml中转移结构的地方调用这个模版，需要用is="模版name"表明是指定的那个模版

<import src="相对路径/绝对路径都可" />    最后那个闭合‘/’必须要有
<block wx:for="{{newData_key}}">
    <view bindtap='onTap' data-tapId="{{item.id}}">
      <template is="postItem" data="{{...item}}"/>   最后那个闭合‘/’必须要有
    </view>
  </block>

        其中data是传给模版的数据，数据就是上面的for循环，三个点{{...item}}意思是把item对象展开，即传给模版的数据是一个展开的对象，调用的时候直接{{name}},不用再{{item.name}} (像我①中就是直接{{avatar}},而没有用{{item.avatar}})。这是一个小技巧，关于{{...}}官方文档也有介绍。

  9.2 样式复用

        ①将样式里要提取的部分放到新建的模版样式文件中

        ②在原样式文件引入模版里的样式       

       @import "绝对路径、相对路径都可以";

        ③ok!

    9.3 目前不支持事件复用，事件必须还是要在源文件的js文件中定义。