微信小程序学习笔记

在微信小程序小技巧

1，在微信小程序的开发者工具中按住alt + shift + F 可以格式化代码样式。
2，在app.json中的"pages"数组中，直接添加页面路径可以快整创建一个新的小程序页面（包括了js、json、wxml、wxss四个文件。）
3，在JS中，Boolean类型的默认值是false，如果默认值是false，则可以不需要赋值。Number类型的默认值是0，同样，如果默认值是0，则可以不需要赋值。

catchtap绑定事件不会事件冒泡 bindtap会事件冒泡

<view class='user-desc' bindtap='onTap'>
  <!-- catchtap不会事件冒泡   bindtap会事件冒泡-->
    <text catchtap='noTextTap'>开启小程序之旅</text>
</view>

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

使用wx.navigateTo在跳转页面的时候，是把页面隐藏，而使用wx.redirectTo是把页面关闭和卸载

  onTap:function(event){
    // wx.navigateTo({  // 页面被隐藏
      // url: '../posts/post',
    // });

    // wx.redirectTo({  // 页面被关闭和卸载
    //   url: '../posts/post',
    // });
 },

如果在项目的底添要添加tabBar就需要用wx.navigateTo，使用wx.redirectTo，底部的tabBar就不会显示出来，只有使用wx.navigateTo的时候，tabBar才会显示出来。

使用 this.setData(post_content1);等同于把post_content1中的数据放在data中，可以直接在页面中使用，例如：<div>{{date}}</div>

Page({
  data: {},
  onLoad: function (options) {
    var post_content1={
      date:"Sep 18 2016",
      post_img:"/imgages/6.jpg",
      content:"曾涉嫌曝光美国机密或被逮捕并引渡至美国的考虑。"
    }
    this.setData(post_content1);
  }
})

给this.data赋值最好用this.setData(newData)，或者像下面这样：
this.setData({
post_key: postsData.postList
});

如果是非异步数据的话也可以用下面的方式，不过不推荐
this.data.postData = postData;

修改data中的值

Page({
  data: {
    test:1 
  },
  onLoad: function (options){
      this.setData({
        test: 2
     })
  }

如果要修改data中的值，必需要使用this.setData来修改，否则不生效。

swiper组件的使用方式

动态数据的使用方式

<view>
  <swiper indicator-dots="{{indicatorDots}}"
  indicator-active-color="{{indicatorActiveColor}}"
  circular="{{circular}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image" width="355" height="150"/>
      </swiper-item>
    </block>
  </swiper>

非动态数据的使用方式

<swiper indicator-dots autoplay current="2" indicator-color="#fff" indicator-active-color="#222">
  <swiper-item><image src='/images/6.jpg'></image></swiper-item>
  <swiper-item><image src='/images/1.jpg'></image></swiper-item>
  <swiper-item><image src='/images/2.jpg'></image></swiper-item>
  <swiper-item><image src='/images/3.jpg'></image></swiper-item>
  <swiper-item><image src='/images/4.jpg'></image></swiper-item>
</swiper> 
</view>

js代码

Page({
  data: {
    imgUrls: [
      '/images/6.jpg',
 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    indicatorActiveColor: "#b3d4db",
    circular: true,
  }
})

微信小程序中用for循环来展示集合数据

js代码

Page({
  onLoad: function (options) { 
    var post_content = [
      {
        date: "Sep 18 2016",
        title: "外媒：厄瓜多尔疑与英国达成协议，将交出藏身大使馆的阿桑奇",
        img: {
          post_img: "/images/6.jpg",
          author_img: "/images/3.jpg"
        },
        content: "曾涉嫌曝光美国机密或被逮捕并引渡至美国的考虑，阿桑奇选择一直留在大使馆内。",
        view_num: "112",
        collect_num: "96",
      },
      {
        date: "Sep 18 2016",
        title: "以色列外交部：该国已将“白盔”成员从叙利亚撤出",
        img: {
          post_img: "/images/6.jpg",
          author_img: "/images/3.jpg"
        },
      content: "“白盔”获得西方的支持并且广为人知，该组织宣称其目的是在战地拯救平民，但被叙利亚政府指责与极端分子有联系，并进行敌对宣传活动。纳赫容在推特中表示：根据美国、加拿大和欧洲国家的请求，以色列对叙利亚民间组织（‘白盔'）的成员及其家人展开人道撤出行动。",
        view_num: "112",
        collect_num: "96",
      }
    ]
    this.setData({
      post_key: post_content
    }); 
  }

wxml代码
item是每一项，index是索引，wx:if="{{true}}"根据if判断的值来展示数据，{{"新闻主体："+item.content}}动态和非动态数据的结合， 给属性添加值必须要用""引起来：src="{{item.img.post_img}}"

<block wx:for="{{post_key}}" wx:for-item="item" wx:for-index="index">
  <view class="news-item">
    <view class="author-info">
      <image wx:if="{{true}}" src="{{item.img.post_img}}" class='author-avatar'></image>
      <text class='author-name'>{{item.date}} === {{item.collect_num}}</text>
    </view>
    <text class='news-title'>{{index}}=={{item.title}}</text>
    <image class='news-img' src='{{item.img.post_img}}'></image>
    <text class='news-content'>{{"新闻主体："+item.content}}</text>
    <view class='news-like'>
      <image class='like-img' src="{{item.img.author_img}}"></image>
      <text class='like-font'>流览量：{{item.view_num}}</text>
      <image class='like-img margin-left-30' src="{{item.img.author_img}}"></image>
      <text class='like-font'>点赞数：{{item.collect_num}}</text>
    </view>
  </view>
</block>

在微信小程序中，个人建议：

纵向的元素用px做为尺寸单位，横向的元素用rpx做为尺寸单位，标题文字用rpx做为尺寸单位，小文字用px做为尺寸单位。

开发UI时，选择模拟器为iPhone 6，适配最佳；当设计稿是以iPhone 6的尺寸来设计的，我们在做小程序开发的时候，就可以按照设计稿的原始尺寸1：1的方式使用rpx单位，例如图片是的width是300，那么在小程序中可以直接设置为：width:300rpx;

组件最好不要留空白间距。

小程序中，组件只能从全局样式中继承font和color。

调用外部数据的方式

a.js // 调用的js

var postsData = require("../../data/posts-data.js");  // 引入数据
Page({
  data: {
  },
  onLoad: function (options) {  // options参数下面没有用到的时候可以不需要。
   
   // 调用方式一
    this.setData({
      post_key: postsData.postList
    }); 

   // 调用方式二
    this.data.post_key = postsData.postList
  },
})

data.js // 数据的js

var local_database = [
  {
    date: "Sep 18 2016",
    title: "“一行两会”同时公布重磅文件 将影响30万亿资金",
    img: {
      post_img: "/images/10.jpg",
      author_img: "/images/2.jpg"
    },
    content: "例如投资起点和估值方法的公募理财产投资起点从5万调整为1万。",
    view_num: "112",
    collect_num: "96",
  },
...
]
module.exports = {
  postList: local_database
}

a.wxml // 页面中使用

<block wx:for="{{post_key}}" wx:for-item="item" wx:for-index="index">
  <view class="news-item">
    <view class="author-info">
      <image wx:if="{{true}}" src="{{item.img.post_img}}" class='author-avatar'></image>
      <text class='author-name'>{{item.date}} === {{item.collect_num}}</text>
    </view>
    <text class='news-title'>{{index}}=={{item.title}}</text>
    <image class='news-img' src='{{item.img.post_img}}'></image>

    <text class='news-content'>{{"新闻主体："+item.content}}</text>
    <view class='news-like'>
      <image class='like-img' src="{{item.img.author_img}}"></image>
      <text class='like-font'>流览量：{{item.view_num}}</text>
      <image class='like-img margin-left-30' src="{{item.img.author_img}}"></image>
      <text class='like-font'>点赞数：{{item.collect_num}}</text>
    </view>
  </view>
</block>

小程序总是会读取data对象来做数据绑定，这个动作我们称为动作A，而这个动作A的执行，是在onLoad事件执行之后发生的。
绝大多数情况下，可以直接在onLoad内部直接给data赋值就可以了。

如果在onLoad下面执行了一个异步操作，而这个异步里面去给data赋值就需要用到this.setData({})

template模板的使用

template.wxml 模板文件

<template name="postItem">
    <view class="news-item">
        <view class="author-info">
          <image wx:if="{{true}}" src="{{img.post_img}}" class='author-avatar'></image>
          <text class='author-name'>{{date}} === {{collect_num}}</text>
        </view>
        <text class='news-title'>{{index}}=={{title}}</text>
        <image class='news-img' src='{{img.post_img}}'></image>

        <text class='news-content'>{{"新闻主体："+content}}</text>
        <view class='news-like'>
          <image class='like-img' src="{{img.author_img}}"></image>
          <text class='like-font'>流览量：{{view_num}}</text>
          <image class='like-img margin-left-30' src="{{img.author_img}}"></image>
          <text class='like-font'>点赞数：{{collect_num}}</text>
        </view>
      </view>
</template>

template.wxss 模板的样式文件

.news-item{
  display: flex;
  flex-direction: column;
  margin: 40rpx auto;
  padding: 30rpx 0;
  background: #fff;
  border-top: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
}

a.wxml文件，下面展示模板文件在页面中的使用

<import src="template.wxml" /> // 引入模板
<view>
<block wx:for="{{post_key}}" wx:for-item="item" wx:for-index="index">
 <!-- // template -->
 <template is="postItem" data="{{...item}}"/>    <!-- ... 此处三个小点的作用是直接将获取到的数据展开平铺，在模板内部使用的时候直接用属性名称即可。 -->
</block>

a.wxss文件，下面展标模板样式文件在页面中的使用

@import "template.wxss";  // 引入样式
page{
  background: rgb(245, 245, 244);
}

自定义属性的使用

<block wx:for="{{post_key}}" wx:for-item="item" wx:for-index="index">
  <view catchtap='onPostTop' data-postId='{{item.post_id}}' data-postTest='test' data-post-text='text' data-post-name='name'></view>
</block>
  <!-- 自定义属性必须由data开头，后面可以跟任意的单词。编译后data和中划线都会被去掉，后面的单词，如果用中划线连接的会被转义为驼峰式命名，而驼峰式的单词会被转义为全部小写，例如上面的所有自定义属性会转义成下面这样：
    postName:"name"
    postText:"text"
    postid:0
    posttest:"test"
    -->

// 获取自定义属性的方式

Page({
  onPostTop:function(event){
    var postId = event.currentTarget.dataset.postId;  //dataset是所有自定义属性的集合
    console.log("onPostTop" + postId);
  }
)}

通过使用自定义属性来获取指定的数据，并跳转到相应的页面

wxml文件中：

<view catchtap='onPostTop' data-postId='{{item.post_id}}' >

js文件中：

Page({
  onPostTop:function(event){
    var postId = event.currentTarget.dataset.postid // 获取自定义id
    console.log("onPostTop" + event.currentTarget.dataset.postid);
    wx.navigateTo({  // 点击某个元素跳转页面
      url: 'post-detail/post-detail?id=' + postId,  // 根据id的值来跳转到指定的页面
    })
  }
})

微信小程序缓存使用

缓存不能超过10MB
添加缓存
wx.setStorageSync('key', '风暴英雄')；
添加异步缓存

wx.getStorageSync({
    key: "posts_collected",
    success: function(res){
        var postsCollected = res.data;
    }
})

修改缓存

wx.setStorageSync('key',{
    game:"风暴英雄",
    developer:"暴雪"
})

获取缓存

onCollectionTap:function(event){
    var game = wx.getStorageSync('key');
    console.log(game);
  },

删除缓存

  onShareTap:function(event){
    wx.removeStorageSync('key')
  },

清除所有的缓存

wx.clearStorageSync();

微信小程序中的if else判断

<image wx:if="{{collected}}" src="/images/2.jpg"></image>
<image wx:else src="/images/3.jpg"></image>

微信小程序的弹窗提示组交互反馈

   wx.showToast({
      title: '收藏成功', // 提示文字
      icon: 'success',  // 显示图标
      duration: 2000  // 停留时间
    })

 wx.showModal({
      title: '收藏',
      content: '是否收藏该文章',
      showCancel: 'true',
      cancelText:"不收藏",
      cancelColor:"#333",
      confirmText:"收藏",
      confirmColor:"#405f80"
    })

隐藏消息提示框

wx.showToast({
   title: '收藏成功', // 提示文字
   icon: 'success',  // 显示图标
   duration: 2000  // 停留时间
})
setTimeout(function(){
    wx.hideToast()
},2000)

var itemList = [
   "分享给微信好友",
  "分享到朋友圈",
   "分享到QQ",
   "分享到微博"
]
wx.showActionSheet({
      itemList: itemList,
      itemColor:"#405f80",
      success:function(res){
        // res.cancel  用户是否点击了取消按钮
        // res.tapIndex 数组元素的序号，从0开始
        wx.showModal({
          title: '用户' + itemList[res.tapIndex],
          content: '用户是否取消'+res.cancel+'现在还无法实现分享功能，什么时候能支持还不确定',
        })
      }
})

在微信小程序中，样式表不支持级联选择器

获取全局变的方式

首先，在最外层的app.js文件中定义需要的全局变量，例如：

App({
    globalData: {
        g_isPlayingMusic: false
    }
})

然后，在需要用到上面这个全局变量的当前文件中获取这个全局变量。

// 先获取全局的app
var app = getApp();
onLoad: function(option){
     // 然后获取自己定义的变量
     var = app.globalData;
 }

// 另一种使用的方式

if(app.globalData.g_isPlayingMusic){  // 全局变量
    this.setData({  // 当前页面的变量 
        isPlayingMusic: true
    })
}

App的三个生命周期函数

onLaunch 应用程序启动后执行，然后执行onShow，onHide是当我们不使用小程序了，例如按home键，把小程序放到后台，这个时候onHide就执行了。
在真实的小程序真机运行时，如果你把它隐藏在后台，小程序整个页面是不会被销毁的，只会被隐藏起来。当我们把小程序隐藏之后再使用，onLaunch是不会再执行的。

App({
  onLaunch: function () {
String1
  },
 onShow: function () {
    String2
 },
 onHide: function () {
    String3
 }
})

真机上小程序缓存的问题

在微信小程序的模拟器中有清空数据缓存的功能，但真实的手机上小程序没有这种清空缓存的功能，如果我们的小程序中有应该到缓存，在更改之后，可能会出现一些奇怪的问题，有时候可能是缓存的问题，因为手机上一直保留着之前的缓存，修改之后缓存替代不进去，所以才会出现这些奇怪的问题。
一个比较直接但不美观的解决办法就是在程序上添加一个清空数据缓存的按钮，然后调用wx.clearStorage这个方法，这个方法就会同步清理本地数据缓存。

通过使用事件冒泡的方式，给轮播图添加点击事件

<swiper indicator-dots="{{indicatorDots}}"
indicator-active-color="{{indicatorActiveColor}}"
circular="{{circular}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"
catchtap="onSwiperTap"> // 将点击事件放在父级标签上，当点击内部的image标签时，事件冒泡到父级，然后执行父级绑定的方法，我们这里

    <swiper-item><image src='/images/6.jpg' data-postId="0"></image></swiper-item>
    <swiper-item><image src='/images/1.jpg' data-postId="2"></image></swiper-item>
    <swiper-item><image src='/images/2.jpg' data-postId="3"></image></swiper-item>
    <swiper-item><image src='/images/3.jpg' data-postId="1"></image></swiper-item>
    <swiper-item><image src='/images/4.jpg' data-postId="0"></image></swiper-item>
  </swiper>

catchtap="onSwiperTap" 将点击事件放在父级标签上，当点击内部的image标签时，事件冒泡到父级，然后执行父级绑定的方法，我们这里使用的是 catchtap， catchtap有阻止事件冒泡的功能，所以当冒到Swiper这一级就不会再往上冒了。
下面是执行的方法：

  onSwiperTap: function(event){
    var postId = event.target.dataset.postid;
    wx.navigateTo({
      url: 'post-detail/post-detail?id=' + postId,
    })
    console.log(222);
  }

event.target.dataset.postid和event.currentTarget.dataset.postid的区别

上面的例子中为什么要用target，而不用currentTarget，因为target指的是当前点击的组件，currentTarget指的是事件捕获的组件
在上面的例子中，target这里指的是image，而currentTarget指的是swiper组件，我们在image上面添加的data-postId="2"，而我们点击的也是image，所以我们这里需要在target上面拿这个postid。

想在页面下方出现tabBar，必须要把页面放在list数组中，像下面这样：

  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  }

tabBar

可以通过postion设置放在底部或者头部，如果是放在头部就直接设置postion: top。默认就在底部，如果设置在头部就只能显示文字，不能设置图片，放在底部的时候就可以加图片。

justify-content的使用

justify-content: space-between; 两端分布
justify-content: space-around; 平均分布并居中对齐

wx:if 和wx:else 的使用方式：

<block wx:for="{{stars}}" wx:for-item="i">
   <image wx:if="{{i}}" src="/images/star2.jpg"></image>
   <image wx:else src="/images/star.jpg"></image>
</block>

<image wx:if="{{i===1}}" src="/images/star2.jpg"></image>
<image wx:elif="{{i===2}}" src="/images/star1.jpg"></image>
<image wx:else src="/images/star.jpg"></image>

页面之间数据的传递方式

第一种，通过URL参数传递

第一步：

catchtap="onMoreTap" ：添加点击事件，data-category="{{categoryTitle}}"：同时，把categoryTitle传递到事件的event中。
movies-list-template.wxml文件

<text class="slogan">{{categoryTitle}}</text>
<view class="more" catchtap="onMoreTap" data-category="{{categoryTitle}}">
        <text class="more-text">更多</text>
        <image class="more-img" src="/images/arrow.jpg"></image>
</view>

第二步：

在方法中获取到上页传递的数据。 event.currentTarget.dataset.category
再将数据作为参数添加到跳转的url中 ：url: 'more-movie/more-movie?category=' + category

onMoreTap:function(event){
        console.log(event.currentTarget.dataset);
        var category = event.currentTarget.dataset.category;
        console.log(category);
        wx.navigateTo({
            url: 'more-movie/more-movie?category=' + category
        });
    }

上面这个方法写在调用它的父级页面的js中。movies.js

第三步：

Page({
    onLoad:function(options){
        var categroy = options.categroy;
        console.log(options);
    }
}) 

在more-movie.js页加载完成后，就可以通过options中拿到movies-list-template.wxml中传来的数据。

第二种，通过全局变量传递
第三种，通过缓存传递
第四种，发射事件和接收事件

微信小程序请求失败的问题

有时候，在打开微信小程序的页面会出现请求失败的问题，页面一直出现空白。打开调试工具，查看timing内的数据，发现Stalled的耗时很长，有10秒之久，并一直卡在此处。
解决的方法就是cache lock。在请求头内的服务器响应头设置为无缓存 'cache-control': 'no-cache', 就ok 了
具体代码看下面：

    wx.request({
        url: rootDocment + url,
        header: {
            'content-type': 'application/x-www-form-urlencoded',
            'cache-control': 'no-cache',
        },
        success: function (res) {
            success(res);
        },
        fail: function (res) {
            fail(res)
            console.log(res.errMsg);
        }
    });

http cache-control 的具体参数，我们可以进入下面这个页面中：
http cache-control 指令的设置以及意义
https://blog.csdn.net/cominglately/article/details/77685214

微信小程序开发者工具快捷键

代码格式化：alt+shift+f
全局找查文件： command + p
最近打开过的文件： command + e