小程序開發的坑

最近作了一個小程序，順利上線。（純屬自娛自樂，看網上說的審覈很差過，就想着看運氣嘍，實在不行就多提兩次。誰知道很快就審覈過了，運氣還行，不事後面提交由於進入的時候必需要受權，被要求整改）有興趣的能夠掃碼體驗(見文末)。這裏我總結分享一下我遇到的坑，以及尚未解決的問題（文中方法不必定最優），歡迎你們留言討論

數據庫權限

我是用雲開發自帶的數據庫來存儲數據（固然你能夠用本身的，我沒這麼作，因此不參與討論），那麼這就存在一個問題，數據庫的默認權限是：僅建立者可讀寫。而後在頁面js裏面極可能就獲取、修改不了數據，也就是除了你，其餘人訪問頁面都訪問不了數據。
ps：我有一次忘了這個，而後找哪裏出問題了查不到數據，查了很久

解決方法：

1. 更改數據庫的權限，使其可以讀或寫
2. 對於操做數據庫的動做全放到雲函數中去

動態監聽數據庫

我有一個好友列表，但願動態看到好友狀態，因此監聽好友狀態變化了，就從新獲取好友列表

//建立監聽器
const watcher = db.collection('T_STATUS').where({
          openId: db.command.in(friendsId)
        }).field({//只監聽這個字段
          updateDate: true
        }).watch({
          onChange: function (snapshot) {
            xxx
          },
          onError: function (err) {
            console.error('the watch closed because of error', err)
          }
        })
      }
//關閉監聽器
watcher.close()

本着監聽應該保證獲取最少數據的原則，我只監聽了全部好友的updateDate這個字段。而後在用戶任何狀態變化的時候都更新這個字段，達到有效監聽

數據庫的聯表查詢

var friendList = []
//獲取關聯的好友詳細信息
for (let i = 0, length = friends.length; i < length; ++i) {
  await Promise.all([
    db.collection('T_A').where({
      openId: friends[i].friendId,
    }).get(),
    db.collection('T_B').where({
      openId: friends[i].friendId
    }).get(),
    db.collection('T_C').where({//好友發給本身的未讀消息數
      sendFrom: friends[i].friendId,
      sendTo: friends[i].ownId,
      readed: false
    }).count()
  ]).then(([user, status, num]) => {
    event.friendList.push({
      ...friends[i],
      user: user.data[0],
      status: status.data[0],
      unreadNum: num.total
    })
  }).catch(err => {
    console.log(err)
  })
}

頁面引入定義的工具函數

在wxs文件（/utils/app.wxs）中定義函數

var formatTime = function (time) {
  return (time/60 > 9 ? parseInt(time/60) : "0"+parseInt(time/60)) + ":" + (time%60 > 9 ? time%60 : "0"+time%60);
}

//  要引用這個文件的函數或者變量，除了在要引用的的js文件中模塊化以外（var utils=require('js地址')），
// 在被引用的的js中要經過 module.exports={a:a}做爲面向對象的變量輸出函數以下：
module.exports = {
  formatTime: formatTime
}

在wxml文件中引入工具函數就可使用

<wxs src="../../utils/app.wxs" module="utils" />
{{utils.formatTime()}}

再記兩個不錯的工具
1.日曆插件：https://github.com/bingyang519/wxMiniProgram.git
2.圖表插件：http://www.javashuo.com/article/p-uiplycgn-nm.html
注：圖表插件的折線圖選curve線型，兩個數值相差較大，會出現正值跑到負軸的狀況

用到的幾個頁面加載方法

onLoad:監聽頁面加載
onShow:監聽頁面顯示
onHide:監聽頁面隱藏
onUnload:監聽頁面卸載
onShareAppMessage:用戶點擊右上角轉發，或者控件有open-type="share"

分享應用

主要是自定義圖片，這個沒啥技巧性

//分享應用給好友
    onShareAppMessage: function (options) {
      var that = this;
      var shareObj = {
       title: "這是一個小程序",
       path: '/pages/index/index',        // 默認是當前頁面，必須是以‘/’開頭的完整路徑
       imageUrl: '/images/sharePhoto.png',    
      }
      return shareObj;
    }

主要說一下的是imageURL, 不是imgURL，看到網上有人說後面這個（我就被這個誤導了），但願你們不要再被誤導了，是前面那個

兩個定時器

1. 我作的是個類定時器工具，直接用到了計時器

//啓動計時器
var interval = setInterval(
       function () {
         xxx//每一秒執行
       }, 1000);
//清除計時器
clearInterval(interval)

這個計時器存在一個問題，小程序切到後臺，它就中止工做了，進入前臺纔會工做。

解決辦法：
a.在onHide方法裏面中止計時器，並記下中止時的時間戳
b.在onShow方法裏開啓計時器，並加上中止的時間

1. 用到了倒計時工具，由於頁面有個打卡按鈕，打卡後字會變；因此設置了這個倒計時，設置瞭如今到下一天凌晨的時間間隔後，將按鈕的字和狀態變掉

timer = setTimeout(function () {
       xxx/下一天的凌晨執行
     }, twelveClock);

這個遇到的問題是怎麼也獲不到東八區和下一天凌晨的時間

解決辦法：
a東八區時間：後文有提到，還未解決
b下一天凌晨時間：var nextday = new Date(new Date(date.getTime() + 10006060*24).setHours(0,0,0,0));

列表裏的輸入和發送事件

我在好友列表裏的每一行都，放了一個輸入框和發送按鈕，由於好友列表是動態的，因此這些事件也都是動態的，這種頁面實現這個功能仍是有點兒挑戰的。
首先，動態列表就存在遍歷list，它的默認下標index可一個取到。控件存在data-key屬性，key對應變量名，在觸發事件裏能夠獲得傳過去的值；input控件存在一個bindInput屬性，能夠配一個方法，監聽輸入事件

//wxml
<view class="friends" wx:for="{{friendList}}"
      <view class="message">
        <input class="weui-input" maxlength="200" placeholder="留言..." adjust-position="true" data-index="{{index}}" bindinput="messageInput" value="{{item.message}}"/>
      </view>

      <view class="send" bindtap="send" data-index="{{index}}">
        <image src="/images/send.png"></image>
      </view>
</view>

//js
messageInput: function(event) {
  //console.log(event.currentTarget.dataset)
  var index = event.currentTarget.dataset.index
  this.data.friendList[index].message = event.detail.value
  this.setData({
    friendList: this.data.friendList
  })
},
//發送消息
send: function(event) {
  //console.log(event.currentTarget.dataset)
  var index = event.currentTarget.dataset.index
  console.log(this.data.friendList[index].message)
  ...
 }

未解決的問題

雲函數中的日期時區問題：
在雲函數中用到日期的時候，我將new Date()轉成東八區時間（至於怎麼轉，你們能夠百度），這時候就存在了三個不一樣的時間：1.雲函數打印日誌的時間是北京時間前8個小時；2.我轉的時間是北京時間；3.把我轉的時間存到數據庫，顯示的是北京時間加上8個小時。你問我問什麼要轉東八區時間，由於我看到了時間不一致，病急亂投醫。