微信小程序开发笔记（一）

Page中Data数据域的设定

• onLoad函数

Page({
  data: {
      <!--微信小程序总是会读取data对象来做数据绑定，这个动作我们称之为动作A
          动作A的执行，总是在onload事件执行之后发生的
      -->
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 调用api获取数据，利用ajax技术，访问api，采用setSata()函数进行填充数据
    // this.data.postList = postData.postList
    this.setData({ postList: postData.postList });
    console.log('onload');
    console.log(postData);
  }

})

代码解析：

• 如果需要在onload函数里面更新数据data，因为页面对data数据域的访问是在onload函数之后，所以两种方式的获取与更新都可以使用，可以写成 this.data.postList = postData.postList或者this.setData({ postList:postData.postList })。

• 如果是异步请求（Ajax）的话，回调函数里面数据域Data一定写成this.setData({ postList:postData.postList})。

注意事项：

如果在wxml文件中使用到data数据域中的数据时，如果该字段需要更新，一定要用this.setData()方法，不然不会发生改变。

例如：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    isPlayingMusic:false
  },
    onMusicTap:function(res){

    var isPlayingMusic = this.data.isPlayingMusic;
  
    if (!isPlayingMusic){
      // 音乐开启
      // url地址要用网络音乐地址和图片
      
      wx.playBackgroundAudio({
        dataUrl: 'http://dl.stream.qqmusic.qq.com/C400002o7MWP467owp.m4a?vkey=DA9FB69050BBA247623FFE19282E62653FF9313F14DBAF5BD98814FA3EF092A46CE3DE2502AA2269CE59F7D45D83BEE3024A26B4C4179BC8&guid=4487294787&uin=1051447847&fromtag=66',
        title: '江南-薛之谦',
        coverImgUrl: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000003VEKyr3PIna4.jpg?max_age=2592000'
      })
      
    //  这样写有Bug，如果wxml页面要用到isPlayingMusic，则数据不会及时更新，不会起到应有的作用
            错误写法： this.data.isPlayingMusic = !this.data.isPlayingMusic;
            
    }else{
    
      //  音乐暂停
      wx.pauseBackgroundAudio()
      //错误写法： this.data.isPlayingMusic = !this.data.isPlayingMusic;
      
    }
    // 更该状态
    //正确写法：
    this.setData({
      isPlayingMusic: !isPlayingMusic
    });

  }
  })
  
  

文件路径引入

• 在.wxml文件中引入.wxml，可以用绝对路径，也可以用相对路径。

 //<import src="./post-item/post-item-template.wxml"/>
 <import src="/pages/posts/post-item/post-item-template.wxml"/>

• js文件引入路径，只能用相对路径。

var postData = require('../../data/posts-data.js');

• css文件引入，使用相对路径

@import "post-item/post-item-template.wxss";

• img文件引入路径， 使用相对路径

Template模板使用

注意事项

• 在模板中引入js文件是不行的，暂不支持
• js逻辑只能写到应用页面中

事件绑定

• 错误写法：

   <template catchtap="onPostTap" data-postId="{{item.postId}}" data-post-name-id="name" >

代码解析：

是因为template标签是暂时存在的，当数据开始遍历之后，template标签消失，显示的只是标签里面的内容。

• 正确写法：

  <view catchtap="onPostTap" data-postId="{{item.postId}}" data-post-name-id="name" >
  <!-- 表示元素模板 -->
    <template is="postItem" data="{{...item}}"/>
    </view>
  

在template标签之外再套上一个view标签，就可以实现列表点击事件。

标签属性命名规则

代码：

<view wx:for="{{postList}}" wx:key="item" wx:for-index="idx">
<!--data 数据传递的入口  is 填写模板名字 data表示要绑定的数据-->
<!--...item  es6解构  -->
<!--data- 自定义属性  -->
<!-- 为了能够执行点击事件 -->
<view catchtap="onPostTap" data-postId="{{item.postId}}" data-post-name-id="name" >
  <!-- 表示元素模板 -->
    <template is="postItem" data="{{...item}}"/>
</view>
</view>

分析：

data-XXX：自定义属性命名规则

1.data-xxx （data后面单词全部会变成小写）

2.data-xxx-xxx(去掉连字符，合并data后面的单词，用驼峰法命名)

例如：

data-postId(编译之前) ----> data-postid(编译之后)

data-post-name(编译之前) ----> data-postName(编译之后)

data-post-name-id(编译之前) ----> data-postNameId(编译之后)

data数据的获取：

<!--在页面js中编写代码-->
var  postId = event.currentTarget.dataset.postid

var  postName = event.currentTarget.dataset.postName

var  postNameId = event.currentTarget.dataset.postNameId

注意事项

第一个连字符后面的单词全部小写，从第二连字符开始后面单词首字母全部都是大写

页面跳转