微信小程式

對于微信小程式開發入門，還是比較簡單的，隻需要具備基本的css+js知識就可以了，成本比較低。寫了小程式和RN之後，有一種原生很笨重的感覺，就是小程式或者是RN等這些新的開發方式在效率上面真的有比較大的優勢，唯一不足就是運作速度了(使用Canvas就會有這樣子的感覺)。感覺目前所接觸的種類前端開發(包括移動端)，都是基本一個套路：UI，網絡，資料儲存，富文本，圖檔/視訊。本文也是從這幾個方向去總結自己的小程式開發經驗。

小程式的入門

其實小程式的開發過程一直都是檢視文檔，按照文檔去操作就可以了。一般流程是先看簡易教程。看完之後，再去看元件。之後可以開始嘗試寫需求，這個過程中，開始不斷的去查API和架構即可。

多列清單

在開發中，有一個需求是需要實作類似Android的GridView網格清單的。但是微信中并沒有提供這樣子的元件，但是小程式是跟html/css前端很類似的，他可以通過指定

display:flex

，然後去設定

flex-wrap:wrap

就可以。例如，有一個數組

data:["A","B","C","D","E","F","G","H","I","J","K","L","M","N"]

需要顯示為一個三列的清單，可以如下處理：

//GridPage.wxml
<view class='grid-container'>
  <view wx:for="{{data}}" wx:key="{{item}}" class="grid-list">
  <view class='grid-item'>
  <text class='grid-item-text'>{{item}}</text>
  </view>
  </view>
</view>

//GridPage.wxss
Page {
  min-height: 100%;
  background-color: #fff;
}
.grid-container {
  margin-left: 4rpx;
  margin-right: 4rpx;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.grid-list {
  width: 33.33%;
}
.grid-item {
  margin: 2rpx;
  background: #999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.grid-item-text {
  color: black;
}
複制代碼

這裡的重點就是

grid-container

中的

flex-wrap

為

wrap

，方向是

row

了。然後他的每一個item寬度都是

33.33%

。需要注意的是一定是去設定外部的contanier而不是内部的list。

層級布局

在CSS中，需要使用層級布局，就是類似Android的FrameLayout效果，可以使用z-index，也可以使用一個絕對定位。比如，我們有一個需求是：下面是一個圖檔，上面是文字。

//PositionPage.wxml
<view class='root'>
<image src='https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3756982450,995202616&fm=27&gp=0.jpg' class='image'></image>
<text class='text'>我是權律二啊</text>
</view>
//PositionPage.wcss
.root{
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
}
.image{
  width: 300rpx;
  height: 300rpx;
}
.text{
  background-color: #999;
  position: absolute;
}
複制代碼

主要是兩點：父布局的

position

必須是

relative

，它本身

position

必須是

absolute

。

網絡請求

小程式的網絡請求是使用wx.request()方法，但是該方法太臃腫，并沒有使用Promise那樣子簡潔。幸運的是小程式支援Promise，是以我們可以把http封裝一下，變成有條理。說到這裡，大家做的時候需要注意去微信背景配置各種request域名，upload域名，downloadFIle域名。下面封裝的例子的資料傳回格式都是json格式post請求方式發出的:

//真正發起請求
function _request(url, param) {
    if (isDebug) {
        Log.i("http==> params->" + JSON.stringify(param));
        Log.i("http==> url->" + url);
    }
    return new Promise((resolve, reject) => {
        wx.request({
            url: url,
            data: param,
            header: {
                'content-type': 'application/json',
                "Accept": "application/json"
            },
            method: "POST",
            success: function (response) {
                if (isDebug) {
                    const jsonResponse = JSON.stringify(response);
                    Log.i("http==> response->" + jsonResponse);
                }
                const {data, statusCode, ok = false} = response;
                //隻有ok為true的是時候才傳回成功，data不一定是包含資料的
                if (statusCode === 200 && data && data.ok) {
                    resolve(data, ok);
                } else {
                    if (statusCode != 404 && statusCode < 500 && statusCode > 300) {
                        ToastUtil.showError();
                    }
                    reject(data);
                }
            },
            fail: reject
        });
    });

}
複制代碼

使用：

function getInfo(fid) {
    const params = {};
    params.token = user.token;
    params.uid = user.uid;
    return _request("INFO_URL", params);
}
複制代碼

然後需要發起請求就調用該方法即可，處理Promise。

上傳圖檔到阿裡雲

需要注意微信upload接口配置目前好像不可以直接配置阿裡雲的URL，需要阿裡雲先跟我們的域名綁定，之後再去把設定到微信背景的upload接口中。可以參考部落格：小程式圖檔上傳阿裡OSS使用方法，擷取簽名阿裡雲Demo位址：JavaScript用戶端簽名直傳，通過打log獲得policy和signature（簽名時間可以稍微設定久一點）之後，就開始封裝upload方法了。如下：

/**
    * 真實上傳代碼
    */
    function _upload(file, success, fail) {
        const suffix = file.substring(file.lastIndexOf("."));
        //做一下md5處理
        const fileName = hex_md5(file);
        Log.i("fileName=" + (fileName + suffix));
        wx.uploadFile({
            url: ALIYUNPHOTOADDRESS,
            formData: {
                "OSSAccessKeyId": "你的阿裡雲accessKey",
                "key": DIR+ (fileName + suffix),
                "policy": "你的policy",
                "success_action_status": '200',
                "signature": "你的signature"
            },
            filePath: file,
            name: 'file',
            success: function (res) {
                const {statusCode} = res;
                if (statusCode === 200) {
                    console.log(JSON.stringify(res));
                    success("" + fileName + suffix);
                } else {
                    console.log("上傳失敗");
                    fail(res);
                }
            },
            fail: function (e) {
                fail(e);
                console.log("上傳失敗");
                console.log("e=" + JSON.stringify(e));
            }, complete: function () {
                console.log("上傳過程結束");
            }
        })
    }

}
複制代碼

其中

url

是上傳OOS的位址，key是需要上傳的檔案夾+上傳之後的檔案名。這裡的fileName我們通過一個md5去計算得來，保證唯一性又沒有什麼特殊字元。md5的算法來自JS-MD5加密。

我們可以順帶封裝一個上傳多張圖檔的方法,而且使用Promise傳回：

/**
* files需要上傳的檔案，是一個數組,裡面是檔案的絕對路徑
*/
function uploadFiles(files) {
  if (!files || files.length <= 0) {
    wx.showModal({
      title: '圖檔錯誤',
      content: '請重試',
      showCancel: false,
    });
    return Promise.reject();
  }
  Log.i("開始上傳" + files);

  return new Promise((resolve, reject) => {
    //上傳成功的檔案名稱
    let uploadPaths = [];
    for (let i = 0; i < files.length; i++) {
      _upload(files[i], (path) => {
        //成功的檔案名
        uploadPaths[uploadPaths.length] = path;
        if (uploadPaths.length >= files.length) {
          //把url+name傳回
          resolve([ALIYUNPHOTOADDRESS + "/" +DIR, uploadPaths]);
        }
      }, () => {
        //error
        reject(res);
      });
    }

  });
複制代碼

Canvas使用

由于需要使用Canvas畫一棵樹，是以還是在這裡走了比較多的坑的。我的需求是Canvas全屏，除了畫一個樹之外還需要畫别的一些獨立Button。首先，設定Canvas全屏和不可滑動，可以通過以下方式：

<canvas  disable-scroll='true' style="width: {{width}}px; height: {{height}}px;background-color:#efeff4;flex:1;" canvas-id="canvas" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"></canvas>
複制代碼

其中，在設定了disable-scroll設定為true，同時需要綁定三個touch事件，才能響應畫布的觸摸event。其中這裡的width+height是通過wx.getSystemInfo()獲得。
其次，canvas沒有類似View的catchtap事件，隻有一些touch事件，詳情可以看Canvas
然後在微信小程式中Canvas是層級最高的，無法通過設定z-index去調，是以假如你的Canvas全屏，還需要一些其他的Button，那麼隻能通過最後canvas去draw了。
在canvas中，假如通過moveTo+lineTo去畫線，一般需要先調用canvas.beginPath()畫完成之後，先調用canvas.stoke()，然後在調用canvas.closePath();

c.beginPath();
    c.setLineWidth(this.arrowPaint.width);
    c.setStrokeStyle(this.arrowPaint.color);
    c.setLineCap("square");

    c.moveTo(this.arrowStartPointF.x, this.arrowStartPointF.y);
    c.lineTo(this.arrowCenterPointF.x, this.arrowCenterPointF.y);
    c.moveTo(this.arrowCenterPointF.x, this.arrowCenterPointF.y);
    c.lineTo(this.arrowEndPointF.x, this.arrowEndPointF.y);
    c.stroke();
    c.closePath();
複制代碼

在連續畫多種圖檔/線條的時候，不要連續多次調用draw(true)方法，消耗性能，一般最後調用fill()/stoke()方法即可。比如

//繪制點
        c.beginPath();
        let y = node.noteView.pointFrameCenter.y + Constant.FRAME_HEIGHT / 2 + Constant.GAP_BETWEEN_DOT + Constant.RADIUS_DOT;

        c.setFillStyle(Constant.LINE_COLOR_RED);
        c.setLineWidth(Constant.LINE_WIDTH);
        c.arc(node.noteView.pointFrameCenter.x, y, Constant.RADIUS_DOT, 0, 2 * Math.PI);

        //
        y += (Constant.GAP_BETWEEN_DOT + Constant.RADIUS_DOT);
        c.arc(node.noteView.pointFrameCenter.x, y, Constant.RADIUS_DOT, 0, 2 * Math.PI);
        //
        //
        y += (Constant.GAP_BETWEEN_DOT + Constant.RADIUS_DOT);
        c.arc(node.noteView.pointFrameCenter.x, y, Constant.RADIUS_DOT, 0, 2 * Math.PI);

        c.fill();
        c.closePath();
複制代碼

對于draw方法，建議隻是調用draw()就好，不要調用draw(true)方法，draw(true)是在原畫布之上再去畫，不會清空舊畫布，draw()會清空。一般，我們會在所有的image，rectangle，line,circle去fill/stoke完之後，再調用draw()方法，這樣子就可以避免draw(true)多次，性能耗損。而且再次去reDraw的時候也不用先去清空畫布。
Canvas的跟随手勢拖動

//index.wxml
  <canvas disable-scroll='true' style="width: {{width}}px; height: {{height}}px;background-color:#efeff4;" canvas-id="canvas" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"></canvas>
//index.wcss
Page {
  overflow: hidden;
  display: flex;
}
//index.js
const app = getApp()

Page({
  data: {
    width: 0,
    height: 0,
  },
  onLoad: function (e) {
    this.time = (new Date()).valueOf();
    this.x = 0;
    this.y = 0;
    this.moveX = 0;
    this.moveY = 0;

    const that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({ width: res.screenWidth, height: res.screenHeight })
      },
    })
    const ctx = wx.createCanvasContext("canvas", this)
    this.canvas = ctx;
  },
  onReady: function () {
    this.draw();
  },
  draw: function () {
    this.canvas.fillRect(10, 10, 150, 100)
    this.canvas.fill();
    this.canvas.draw()
  },
  touchMove: function (e) {
    console.log("touchMove")
    let xOffset = e.touches[0].x - this.x;
    let yOffset = e.touches[0].y - this.y;
    this.x = e.touches[0].x;
    this.y = e.touches[0].y;
    this.moveX = this.moveX + xOffset;
    this.moveY = this.moveY + yOffset;
    this.canvas.translate(this.moveX, this.moveY);
    this.draw();
  },
  touchStart: function (e) {
    this.x = e.touches[0].x;
    this.y = e.touches[0].y;
  },
  touchEnd: function (e) {
    console.log("touchEnd")
  }
})
複制代碼

其他的scale等方法類似。

微信小程式開發一些經驗微信小程式

微信小程式

小程式的入門

多列清單

層級布局

網絡請求

上傳圖檔到阿裡雲

Canvas使用

繼續閱讀

CSS之折疊菜單

新聞 | Mapbox 牽手阿裡，飛豬旅行上線六大城市地圖功能

web開發之前後端渲染

HBuilder開發App Step1——環境搭建，HelloMUI 以及真機調試

[HTML5]自定義屬性 data-* 和 jQuery.data 詳解

七牛雲-C#SDK-上傳-前期準備

[轉]iOS微信小視訊優化心得

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題

android 主線程的相關問題

vue-cli簡介（中文翻譯）

Ajax發送和擷取json資料到Spring mvc 1.spring mvc後端2.web前段

JSONObject包導入異常 java.lang.NoClassDefFoundErrorweb項目的導入包的問題