微信小程序手记

微信小程序手记

Swiper使用

 <swiper indicator-dots='true' interval='3000' autoplay='true'>
    <swiper-item>
      <image src='/images/wx.png'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/vr.png'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/iqiyi.png'></image>
    </swiper-item>
  </swiper>

其中swiper-item代表的是一张元素

indicator-dots='true’属性为是否有页标记点

interval=‘3000’ 属性为轮播时间

aotoplay='true’属性为是否自动进行轮播

小程序的生命周期

列表渲染wx-if

  <!-- wx:if="true" 此属性只能赋bool值，如果为空或者不为true都判断为false不显示 -->
 <image wx:if="true" src='/images/iqiyi.png'></image>

先看一段JS文件代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
      name:"张三";
  },
      /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      var local_database = [
          {
              name: "张三",
          },
          {
              name: "李四",
          },
      ]
      //数据绑定,当前的数据是声明在onLoad里面，我上面提了数据必须在data里才可以，所有我们要调用this.setData({})
      this.setData({
          //post_key是代表在data中的名称，我们在前端for循环绑定的时候也能用到，后面就是声明的变量直
          post_key: local_database
      });
  }
});

列表渲染wx-for

  <block wx:for='{{post_key}}' wx:key='' wx:for-item="item" wx:for-index="idx">
        <!-- 这里我们可以在{{}}中对值进行拼接，或者进行简单计算 -->
        <text>{{"当前下标为："+idx}}</text>
      <text>{{item.name}}</text>
  </block>
</view>

{{}}是绑定值的意思，这个值是后台传过来的必须要包含在js文件里的data中

wx:key=’’ 这个属性可以不加，控制台会报一个警告

wx:for-item="item"属性可以理解为单个对象的名称，默认直为item

wx:for-index="idx"属性就是标识，当前是第几条数据，默认值为index

小程序的事件捕捉

  <view class='moto-container' bind:tap="onTap">
     <text class='user-moto' catch:tap="onSubTap">开启小程序之旅</text>
  </view>

bind:tap="onTap"为监听事件

catch:tap="onTap"也是一种事件监听，

catch和bind的区别在于，catch会阻止向父类监听

就向上面如果在‘开启小程序之旅’这个标签中使用bind:tap的话会触发两次监听，

第一次为onsubTap,第二次为onTap

但是如果设置为catch:tap的话就不会进行触发上一级也就是父级

JS事件监听以及跳转代码

Page({
  onTap:function(){
    //跳转界面 这种跳转是带有返回键的
    /*wx.navigateTo({
      url: '../posts/posts'
    });*/
    //使用redirectTo跳转是没有返回的
    wx.redirectTo({
      url: '../posts/posts',
    });
  },
 /* onContainerTap:function(){
    console.log("Container Tap");
  },
  onSubTap: function () {
    console.log("Sub Tap");
  },*/
  //卸载页面事件
  onUnload:function(){
    console.log("onUnload");
  },
  //关闭页面事件
  onHide:function(){
    console.log("onHide");
  }
})

这里有两个事件一种是卸载界面，一种是关闭（隐藏）页面事件

如果没有返回按钮的跳转情况也就是使用redirectTo这时候应该触发卸载页面事件

如果有返回按钮的跳转情况也就是使用navigateTo这时候应该触发关闭页面页面事件

将业务数据分离到单独的数据

//当前文件为data.js  
onLoad: function (options) {
      var local_database = [
          {
              name: "张三",
          },
          {
              name: "李四",
          },
      ]
// 定义一个导出的输出口
module.exports = {
    postList: local_database
}

module.exports定义输出接口，一会会在写一个介入接口

如果在调用这个文件呢?

//引入定义的数据js文件
var data=require('../../data/data.js')
Page({

  /**
   * 页面的初始数据
   */
  data: {
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //数据绑定
    this.setData({
      //这里data为介入声明的变量名，postList是我们在输出接口定义的名称
      //post_key为data中的名称，前端进行数据绑定的时候能用到
      post_key: data.postList
    });
  }
}）；

var data=require(’…/…/data/data.js’)为导入外部js文件

@import “…/…/data/data.wxss”;为导入wxss文件

定义template模板

template模板是组件化思想

定义一套代码可以在多个文件中引入进行使用

<template name="postItem">
<view class='post-container'>
        <text class='post-name'>{{item.name}}</text>
    </view>
</template>

其中name属性为temlate的名字，在引入的时候能够用到

使用template模板

<import src="post-item/post-item-template.wxml"/>
<view>
    <template  is="postItem"/>
</view>

is属性的值就是我们定义的template的name

使用进行引入

当然既然模板已经分离出去了，那么wxss样式文件也需要分离出去.

在css中引入的方式应该为：

@import “…/…/data/data.wxss”;为导入wxss文件

模板文件传递参数

 <block wx:for='{{post_key}}' wx:key='' wx:for-item="item" wx:for-index="idx">
  <view bind:tap="onPostTap" data-postID='{{item.postId}}'>
   <!-- wx:if="" 如果为空的话默认为false -->
   <!-- ...为ES6的语法，意思是将数据结构中的大括号去掉，这样也就不用使用item.name直接写name就可以，所有传递参数的名字就没有了限制 -->
    <template  is="postItem" data="{{...item}}"/>
  </view>
  </block>

<template name="postItem">
<view class='post-container'>
      <view class='post-author-date'>
        <image src='{{avatar}}' class='post-author'></image>
          <!-- 本来为   <text class='post-date'>{{item.date}}</text> -->
        <text class='post-date'>{{date}}</text>
      </view>
    <!--   <text class='post-title'>{{item.title}}</text> -->
      <text class='post-title'>{{title}}</text>
      <image class='post-image' src='{{headImgSrc}}'></image>
      <text class='post-content'>{{content}}</text>
      <view class='post-like'>
        <image class='post-like-image' src='../../images/icon/chat.png'></image>
        <text class='post-like-font'>{{collection}}</text>
        <image class='post-like-image' src='../../images/icon/view.png'></image>
        <text class='post-like-font'>{{reading}}</text>
      </view>
    </view>
</template>

{{…item}}其中…是ES6语法代表将数据结构中的{}删除掉这样就可以直接获取到对象

点击事件获取当前对象的id,跳转界面根据id显示相应的值

 <block wx:for='{{post_key}}' wx:key='' wx:for-item="item" wx:for-index="idx">
  <view bind:tap="onPostTap" data-postID='{{item.postId}}'>
    <!-- 这里不能直接在template里添加点击事件，因为他本身就是一个占位符，在代码中是不显示的，所有我在外边加了一个view -->
    <template  is="postItem" data="{{...item}}"/>
  </view>
  </block>

在view使用bind:tap监听了一个事件，并且定义了data-postId属性，值就是要拿到的id

这里需要注意，定义值的属性之前必须以data-开头

还有就是小程序会默认把data-后面的第一个名字所有的大写自动转换为小写

例如：data-postID 在js文件中需要获取 postid,才能够拿到值，是不需要加data-的

如果有多个 - 的情况下，小程序会使用驼峰命名法

例如：data-postiD-name 在js中需要获取postidName，才能拿到直，如果实在不清楚建议打印log在console中查看

Storage缓存

 onLoad: function (options) {
    //创建缓存
    wx.setStorageSync('post','123456');
    wx.setStorageSync('icac', {
      name:'张三',
      age:20
    });
  },
  storage: function(){
    //获取缓存
    var data=wx.getStorageSync('post');
    console.log(data);
  },
  removestorage: function(){
    //清理单个缓存
    //wx.removeStorageSync('post');
    //清理多个缓存
    wx.clearStorageSync();
  },

setStorageSync和setStorage的区别在于setStorageSync****不是异步缓存，setStorage是异步的

目前小程序对缓存的限制为10MB（总缓存大小），单个缓存大小为1MB

当数据量比较小的时候可以考虑使用setStorageSync同步缓存，数据量大的话使用异步缓存，效率更高

showToast

   wx.showToast({
      title: collected?'收藏成功':'取消成功',//提示文字
      duration:1000,//动画持续时间
      icon: 'success'//这里有三种 1.success，2.loading 3.none
    })

showModal

//获取缓存
    var postsCollected = wx.getStorageSync('postsCollected');
    //获取到单个对象
    var collected = postsCollected[this.data.currentPostId];
    //如果当前文字是收藏的状态：是否取消收藏
    //如果当前文字是取消收藏的状态：是否收藏
    wx.showModal({
      // title: '收藏',//标题文字
      content: collected ? '是否取消收藏该文字' :'是否收藏该文字',//内容
      showCancel:true,//是否显示取消按钮，默认为true
      cancelText:'取消',//设置取消按钮的文字
      confirmText:'确认',//设置确认按钮的文字
      cancelColor:'#333',//修改取消按钮颜色
      confirmColor:'#405f80',//修改确认按钮颜色
      //只有用户点击收藏或者不收藏的时候才会弹出来
      // success:function(res){ //ES6语法箭头函数，处理this获取值的问题
      success: (res) => {//ES6语法 箭头函数
        //点的收藏还是不收藏
        if(res.confirm){
          //赋相反值
          collected = !collected;
          postsCollected[this.data.currentPostId] = collected;
          wx.setStorageSync('postsCollected', postsCollected);
          //刷新data里面的值
          this.setData({ collected });
        }
      }
    })

tabBar选项卡

"tabBar": {
    "borderStyle":"white",//选项卡上面的黑线颜色改变
    "position":"top",//选项卡的显示位置：top、bottom，注意这里如果选则使用top的话图标将不会进行显示。
    "list": [
      {
        "pagePath": "pages/posts/posts",//页面路径,注意这里不能够使用绝对路径
        "text": "阅读",//文字
        "iconPath": "/images/tab/yuedu.png",//默认icon图片
        "selectedIconPath": "/images/tab/yuedu_hl.png"//选中时icon图片
      },
      {
        "pagePath": "pages/demo/demo",
        "text": "Demo",
        "iconPath": "/images/tab/dianying.png",
        "selectedIconPath": "/images/tab/dianying_hl.png"
      }
    ]
  }

扩展

//在小程序中药跳转到带有tabBar的页面中去必须使用以下方式进行跳转 
wx.switchTab({
      url: '../posts/posts',
    });