微信小程序开发初体验

微信小程序开发，一些业务实现直接去查官方开发文档去找合适的组件和支持就好了，本篇也就是根据第一次接触到的业务罗列了一些知识，作为熟悉过程。

0、image标签下的图片微信默认给出了高宽，为长方形。
1、只有被text标签包围的文字才能被长摁选中。
2、关于文件之间的引用

"pages":[
    "pages/welcome/welcome"
  ]

此处注册了welcome路径下的所有welcome的文件（即微信小程序标配四个文件），文件之间无需再彼此显示引用即可使用。

3、关于样式写在wxml中通过style方式（动态改变）还是写在wxss中的class样式（静态不变）中，是根据是静态不变的样式还是需要动态改变的样式。

注意：style中的样式每次编译都会去解析这样的一个样式，如果静态样式也放到style中运行效率会比较低。

4、flex弹性布局，以及flex配套的属性，用于垂直和居中

.container{
  display: flex;
  flex-direction: column;
  align-items: center;
}

5、全局的统一的样式可以放在app.wxss中，可以用text这种标签去确定样式，表明text这种文本文字在小程序中都带有这种样式，除非是本页的样式文件中重新定义了该属性。

text{
  font-family: Microsoft Yahei;
}

6、文字垂直居中一般设置文字行高为容器行高即可：

.moto{
  font-size: 22rpx;
  font-weight: bold;
  line-height: 80rpx;//容器行高
}

7、在给整个页面设置背景时要注意：

<view class="container">
  <image class="user-avatar" src='/images/avatar.jpeg'></image>
  <text class="user-name">Hello,九月</text>
  <view class="moto-container">
    <text class="moto">开启小程序之旅</text>
  </view>
</view>

上面是我们写的布局，但是其实在小程序中，默认是在外面还有一层page标签，这才是真正的最外层布局。window中可以设置窗口导航栏的背景等关于窗口的参数。

8、text标签嵌套以及text支持转义字符：（hello是红色，并且e后面是换行）

<text class="user-name"><text style='color:red'>He\nllo</text>,九月</text>

9、微信小程序的滑块组件swiper

<swiper style='width:100%;height:300rpx'>
    <swiper-item>
      <image src='/images/swipe_item.jpg' style='width:100%;height:100%'></image>
    </swiper-item>
    <swiper-item><icon type='sucess'></icon></swiper-item>
    <swiper-item>hahah</swiper-item>
  </swiper>

swiper-item的宽高由swiper来决定，item内部的元素可以根据业务自行定义，宽高需要自行定义。

上述样式同样可以放入wxss样式中，因为这个轮播滑块的组件不是那么频繁使用，应该在本页面只使用这一次，所以通过给标签设置样式即可：

swiper{
  width:100%;
  height:300rpx
}

swiper image{
  width:100%;
  height:100%
}

10、对于不同的页面导航栏需要不同的样式，可以在子页面目录下单独配置json文件中关于当前页面的样式，但是子页面下的json文件中只能对window设置，所以微信小程序直接忽略掉了window的前缀，直接设置window内部属性就好。

• 项目的json配置(还可以更多，此处主要说明差别)

{
  "pages":[
    "pages/posts/posts",
    "pages/welcome/welcome"
  ],
  "window":{
    "navigationBarBackgroundColor": "#b3d4db"
  }
}

• 子页面的json配置

{
  "navigationBarBackgroundColor": "#405f80" 
}

11、关于小程序中的布尔值

swiper indicator-dots='true' autoplay='true' interval='2000'

小程序中的布尔值设置的时候在引号之间，设置字符串true或者false本身并不起作用，只是因为设置true时解析时为空，默认将该属性设置为true，那么此时设置false则不会生效，仍然解析为空，设置此属性默认值true，那么怎么设置布尔值呢？其实正确的姿势应该和绑定数据一样{{false}}（双大括号内写值）

12、小程序中的数据绑定

• 首先数据格式如下：

onLoad:function(options){
    console.log("onLoad");
    var post_content1={
      date:"2018-10-12",
      title:"正是秋高云淡时",
      post_img:"/images/item2.jpg",
      content:"1900年初，日本人蜂拥而至，并在大邱市中心形成集中居住地，随之而来的娼妓也在此聚集。2004年韩国制定《性买卖防止特别法》后，据统计最多时有350余名性工作者云集大邱红灯区，但现在登记在册的不足百人，还有不少在非法营业。随着城市发展和地铁陆续开通，在大邱红灯区周边建起多个大型住宅小区，入住居民的投诉也接连不断，这让历经百年风雨的红灯区面临生存危机。",
      view_num:"112",
      collect_num:"96",
      author_img:"/images/avatar.jpeg"
    }
    this.setData(post_content1);
  }

• 绑定时的写法：

<view class='post-container'>
    <view class='post-author-date'>
      <image class="post-author" src='{{imgs.author_img}}'></image>
      <text class="post-date">{{date}}</text>
    </view>
    <text class='post-title'>{{title}}</text>
    <image class="post-image" src='{{imgs.post_img}}'></image>
    <text class='post-content'>{{content}}</text>
    <view class="post-like">
      <image class="post-like-image" src='/images/avatar1.jpg'></image>
      <text class="post-like-font">{{view_num}}</text>
      <image class="post-like-image" src='/images/avatar1.jpg'></image>
      <text class="post-like-font">{{collect_num}}</text>
    </view>
  </view>

注意其中的imgs是又套了一层，绑定数据时也略有不同。

设置数组数据：

var post_content = [
      {
        date: "2018-10-12",
        title: "正是秋高云淡时",
        post_img: "/images/item2.jpg",
        author_img: "/images/avatar.jpeg",
        content: "1900年初，日本人蜂拥而至，并在大邱市中心形成集中居住地，随之而来的娼妓也在此聚集。2004年韩国制定《性买卖防止特别法》后，据统计最多时有350余名性工作者云集大邱红灯区，但现在登记在册的不足百人，还有不少在非法营业。随着城市发展和地铁陆续开通，在大邱红灯区周边建起多个大型住宅小区，入住居民的投诉也接连不断，这让历经百年风雨的红灯区面临生存危机。",
        view_num: "112",
        collect_num: "96" 
      },
      {
        date: "2018-10-12",
        title: "正是秋高云淡时",
        post_img: "/images/item2.jpg",
        author_img: "/images/avatar.jpeg",
        content: "1900年初，日本人蜂拥而至，并在大邱市中心形成集中居住地，随之而来的娼妓也在此聚集。2004年韩国制定《性买卖防止特别法》后，据统计最多时有350余名性工作者云集大邱红灯区，但现在登记在册的不足百人，还有不少在非法营业。随着城市发展和地铁陆续开通，在大邱红灯区周边建起多个大型住宅小区，入住居民的投诉也接连不断，这让历经百年风雨的红灯区面临生存危机。",
        view_num: "112",
        collect_num: "96" 
      }
    ]
    var post_content1={
      date:"2018-10-12",
      title:"正是秋高云淡时",
      post_img: "/images/item2.jpg",
      author_img: "/images/avatar.jpeg",
      content:"1900年初，日本人蜂拥而至，并在大邱市中心形成集中居住地，随之而来的娼妓也在此聚集。2004年韩国制定《性买卖防止特别法》后，据统计最多时有350余名性工作者云集大邱红灯区，但现在登记在册的不足百人，还有不少在非法营业。随着城市发展和地铁陆续开通，在大邱红灯区周边建起多个大型住宅小区，入住居民的投诉也接连不断，这让历经百年风雨的红灯区面临生存危机。",
      view_num:"112",
      collect_num:"96" 
    }
    this.setData({
      post_key:post_content
    });

注意数组设置setData的方式与单个数据略有不同，主要还是涉及到一个数据平移到data中的格式问题。

<block wx:for="{{post_key}}" wx:for-item="item">
    <view class='post-container'>
        <view class='post-author-date'>
          <image class="post-author" src='{{item.author_img}}'></image>
          <text class="post-date">{{item.date}} {{idx}}</text>
        </view>
        <text class='post-title'>{{item.title}} {{index}}</text>
        <image class="post-image" src='{{item.post_img}}'></image>
        <text class='post-content'>{{item.content}}</text>
        <view class="post-like">
          <image class="post-like-image" src='/images/avatar1.jpg'></image>
          <text class="post-like-font">{{item.view_num}}</text>
          <image class="post-like-image" src='/images/avatar1.jpg'></image>
          <text class="post-like-font">{{item.collect_num}}</text>
        </view>
      </view>
  </block>

数据循环通过wx:for进行循环，每个item其实是默认为item的，不写也可以，index默认是index，但是也可以通过wx:for-index=""的方式更改index索引的标识。

13、小程序中的事件绑定：
bind和catch，bind绑定方法不能阻止冒泡事件，而catch则可以阻止冒泡事件。

14、小程序的一个数据绑定的事情：

var local_database = [
  {
    date: "2018-10-12",
    title: "正是秋高云淡时",
    imgSrc: "/images/item2.jpg",
    avatar: "/images/avatar.jpeg",
    content: "1900年初，日本人蜂拥而至，并在大邱市中心形成集中居住地，随之而来的娼妓也在此聚集。2004年韩国制定《性买卖防止特别法》后，据统计最多时有350余名性工作者云集大邱红灯区，但现在登记在册的不足百人，还有不少在非法营业。随着城市发展和地铁陆续开通，在大邱红灯区周边建起多个大型住宅小区，入住居民的投诉也接连不断，这让历经百年风雨的红灯区面临生存危机。",
    reading: "112",
    collection: "96"
  },
  {
    date: "2018-10-12",
    title: "正是秋高云淡时",
    imgSrc: "/images/item2.jpg",
    avatar: "/images/avatar.jpeg",
    content: "1900年初，日本人蜂拥而至，并在大邱市中心形成集中居住地，随之而来的娼妓也在此聚集。2004年韩国制定《性买卖防止特别法》后，据统计最多时有350余名性工作者云集大邱红灯区，但现在登记在册的不足百人，还有不少在非法营业。随着城市发展和地铁陆续开通，在大邱红灯区周边建起多个大型住宅小区，入住居民的投诉也接连不断，这让历经百年风雨的红灯区面临生存危机。",
    reading: "112",
    collection: "96"
  },
  {
    date: "2018-10-12",
    title: "正是秋高云淡时",
    imgSrc: "/images/item2.jpg",
    avatar: "/images/avatar.jpeg",
    content: "1900年初，日本人蜂拥而至，并在大邱市中心形成集中居住地，随之而来的娼妓也在此聚集。2004年韩国制定《性买卖防止特别法》后，据统计最多时有350余名性工作者云集大邱红灯区，但现在登记在册的不足百人，还有不少在非法营业。随着城市发展和地铁陆续开通，在大邱红灯区周边建起多个大型住宅小区，入住居民的投诉也接连不断，这让历经百年风雨的红灯区面临生存危机。",
    reading: "112",
    collection: "96"
  },
  {
    date: "2018-10-12",
    title: "正是秋高云淡时",
    imgSrc: "/images/item2.jpg",
    avatar: "/images/avatar.jpeg",
    content: "1900年初，日本人蜂拥而至，并在大邱市中心形成集中居住地，随之而来的娼妓也在此聚集。2004年韩国制定《性买卖防止特别法》后，据统计最多时有350余名性工作者云集大邱红灯区，但现在登记在册的不足百人，还有不少在非法营业。随着城市发展和地铁陆续开通，在大邱红灯区周边建起多个大型住宅小区，入住居民的投诉也接连不断，这让历经百年风雨的红灯区面临生存危机。",
    reading: "112",
    collection: "96"
  },
  {
    date: "2018-10-12",
    title: "正是秋高云淡时",
    imgSrc: "/images/item2.jpg",
    avatar: "/images/avatar.jpeg",
    content: "1900年初，日本人蜂拥而至，并在大邱市中心形成集中居住地，随之而来的娼妓也在此聚集。2004年韩国制定《性买卖防止特别法》后，据统计最多时有350余名性工作者云集大邱红灯区，但现在登记在册的不足百人，还有不少在非法营业。随着城市发展和地铁陆续开通，在大邱红灯区周边建起多个大型住宅小区，入住居民的投诉也接连不断，这让历经百年风雨的红灯区面临生存危机。",
    reading: "112",
    collection: "96"
  }
]

module.exports = {
  postList: local_database
}

var postsData = require('../../data/posts-data.js');
Page({
  data:{},
  onLoad:function(options){
    console.log("onLoad");
    var post_content = [
      {
        date: "2018-10-12",
        title: "正是秋高云淡时",
        imgSrc: "/images/item2.jpg",
        avatar: "/images/avatar.jpeg",
        content: "1900年初，日本人蜂拥而至，并在大邱市中心形成集中居住地，随之而来的娼妓也在此聚集。2004年韩国制定《性买卖防止特别法》后，据统计最多时有350余名性工作者云集大邱红灯区，但现在登记在册的不足百人，还有不少在非法营业。随着城市发展和地铁陆续开通，在大邱红灯区周边建起多个大型住宅小区，入住居民的投诉也接连不断，这让历经百年风雨的红灯区面临生存危机。",
        reading: "112",
        collection: "96" 
      },
      {
        date: "2018-10-12",
        title: "正是秋高云淡时",
        imgSrc: "/images/item2.jpg",
        avatar: "/images/avatar.jpeg",
        content: "1900年初，日本人蜂拥而至，并在大邱市中心形成集中居住地，随之而来的娼妓也在此聚集。2004年韩国制定《性买卖防止特别法》后，据统计最多时有350余名性工作者云集大邱红灯区，但现在登记在册的不足百人，还有不少在非法营业。随着城市发展和地铁陆续开通，在大邱红灯区周边建起多个大型住宅小区，入住居民的投诉也接连不断，这让历经百年风雨的红灯区面临生存危机。",
        reading: "112",
        collection: "96" 
      }
    ]
    var post_content1={
      date:"2018-10-12",
      title:"正是秋高云淡时",
      post_img: "/images/item2.jpg",
      author_img: "/images/avatar.jpeg",
      content:"1900年初，日本人蜂拥而至，并在大邱市中心形成集中居住地，随之而来的娼妓也在此聚集。2004年韩国制定《性买卖防止特别法》后，据统计最多时有350余名性工作者云集大邱红灯区，但现在登记在册的不足百人，还有不少在非法营业。随着城市发展和地铁陆续开通，在大邱红灯区周边建起多个大型住宅小区，入住居民的投诉也接连不断，这让历经百年风雨的红灯区面临生存危机。",
      view_num:"112",
      collect_num:"96" 
    }
    this.data.post_key = postsData.postList;
    // this.setData({
    //   post_key:postsData.postList
    // });
  }
})

小程序总会读取data对象来做数据绑定，这个动作我们称为动作A；而这个动作A的执行是在onLoad事件执行之后发生的，那么我们在onLoad事件中直接给data对象中进行初始化赋值是可以的。那么setData是否还有存在的必要呢？答案是如果onLoad中有一个异步的方法获取数据，那么并不能保证onLoad执行完毕之后异步方法已经获取到数据，这时候就要用setData去更新数据。

15、动态更新图片的两种方式：

<view class='container'>
  <image class="head-image" src='{{post_key.headImgSrc}}'></image>
  <view class="author-date">
    <image class="avatar" src='{{post_key.avatar}}'></image>
    <image catchtap="onMusicTap" class="audio" src='{{isPlayingMusic?"/images/music/music-stop.png":"/images/music/music-start.png"}}'></image>
    <text class="author">{{post_key.author}}</text>
    <text class="const-text">发表于</text>
    <text class="date">{{post_key.date}}</text>
  </view>
  <text class="title">{{post_key.title}}</text>
  <view class='tool'>
    <view class='circle-img'>
      <image  wx:if="{{collected}}"catchtap="onCollection" src='/images/collection.png'></image>
      <image wx:else catchtap="onCollection" src='/images/collection-anti.png'></image>
      <image catchtap="onShare" class="share-img" src='/images/avatar.jpeg'></image>
    </view>
    <view class='horizon'></view>
  </view>
  <text class='detail'>{{post_key.detail}}</text>
</view>

一种是设置一个image，通过绑定的数据做三目运算，设置好两张图片
另外一种是设置两个image，通过if else方式显示出不同的image。

16、事件冒泡的应用

• 方法1 每个子元素单独设置tap事件

<swiper indicator-dots='true' autoplay='true' interval='2000'>
    <swiper-item>
      <image catchtap="onItemSwiperTap" src='/images/swipe_item.jpg' data-postId='1'></image>
    </swiper-item>
    <swiper-item>
      <image catchtap="onItemSwiperTap" src='/images/swiper_item2.jpg' data-postId='2'></image>
    </swiper-item>
    <swiper-item>
      <image catchtap="onItemSwiperTap" src='/images/swipe_item.jpg' data-postId='3'></image>
    </swiper-item>
  </swiper>

在每个子元素中进行事件绑定，这个也太麻烦了

onItemSwiperTap:function(event){
    var postId = event.currentTarget.dataset.postid;
    wx.navigateTo({
      url: 'post-detail/post-detail?id=' + postId
    })
  }

• 方法2 在父元素上设置tap事件

<swiper bindtap="onSwiperTap" indicator-dots='true' autoplay='true' interval='2000'>
    <swiper-item>
      <image src='/images/swipe_item.jpg' data-postId='1'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/swiper_item2.jpg' data-postId='2'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/swipe_item.jpg' data-postId='3'></image>
    </swiper-item>
  </swiper>

在父元素上绑定一个事件

onSwiperTap:function(event){
    //target指的是当前点击的组件 currentTarget指的是事件捕获的组件
    var postId = event.target.dataset.postid;
    wx.navigateTo({
      url: 'post-detail/post-detail?id=' + postId
    })
  }

两个方法获取数据的方式不太一样，注意看注释。