微信小程式開發初體驗

weixin_33860722發表於2018-08-27
微信小程式

微信小程式開發，一些業務實現直接去查官方開發文件去找合適的元件和支援就好了，本篇也就是根據第一次接觸到的業務羅列了一些知識，作為熟悉過程。

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
    })
  }

兩個方法獲取資料的方式不太一樣，注意看註釋。

相關文章