2019，幫助你更好的開發(fā)小程序

DevTalking 發(fā)布于2019-08-23 16:14 / 1658人閱讀

摘要：前言原生開發(fā)小程序有了兩個項(xiàng)目，在原生開發(fā)小程序經(jīng)驗(yàn)技巧方面有一些自己的總結(jié)，此篇文章做原創(chuàng)分享本文適合老手查看，新手請參閱官方文檔，同步至。

前言

原生開發(fā)小程序有了兩個項(xiàng)目，在原生開發(fā)小程序經(jīng)驗(yàn)技巧方面有一些自己的總結(jié)，此篇文章做原創(chuàng)分享！

本文適合老手查看，新手請參閱官方文檔，同步至github。

1.發(fā)布訂閱處理復(fù)雜邏輯

支持先訂閱后發(fā)布，以及先發(fā)布后訂閱

方法源碼

var Event = (function() {
  var clientList = {},
    pub,
    sub,
    remove;

  var cached = {};

  sub = function(key, fn) {
    if (!clientList[key]) {
      clientList[key] = [];
    }
    // 使用緩存執(zhí)行的訂閱不用多次調(diào)用執(zhí)行
    cached[key + "time"] == undefined ? clientList[key].push(fn) : "";
    if (cached[key] instanceof Array && cached[key].length > 0) {
      //說明有緩存的 可以執(zhí)行
      fn.apply(null, cached[key]);
      cached[key + "time"] = 1;
    }
  };
  pub = function() {
    var key = Array.prototype.shift.call(arguments),
      fns = clientList[key];
    if (!fns || fns.length === 0) {
      //初始默認(rèn)緩存
      cached[key] = Array.prototype.slice.call(arguments, 0);
      return false;
    }

    for (var i = 0, fn; (fn = fns[i++]); ) {
      // 再次發(fā)布更新緩存中的 data 參數(shù)
      cached[key + "time"] != undefined
        ? (cached[key] = Array.prototype.slice.call(arguments, 0))
        : "";
      fn.apply(this, arguments);
    }
  };
  remove = function(key, fn) {
    var fns = clientList[key];
    // 緩存訂閱一并刪除
    var cachedFn = cached[key];
    if (!fns && !cachedFn) {
      return false;
    }
    if (!fn) {
      fns && (fns.length = 0);
      cachedFn && (cachedFn.length = 0);
    } else {
      if (cachedFn) {
        for (var m = cachedFn.length - 1; m >= 0; m--) {
          var _fn_temp = cachedFn[m];
          if (_fn_temp === fn) {
            cachedFn.splice(m, 1);
          }
        }
      }
      for (var n = fns.length - 1; n >= 0; n--) {
        var _fn = fns[n];
        if (_fn === fn) {
          fns.splice(n, 1);
        }
      }
    }
  };
  return {
    pub: pub,
    sub: sub,
    remove: remove
  };
})();

全局掛載使用

// app.js
App({
  onLaunch: function(e) {
    // 注冊 storage，這是第二條
    wx.Storage = Storage;
    // 注冊發(fā)布訂閱模式
    wx.yue = Event;
  }
});

使用實(shí)例

// 添加收貨地址頁面訂閱
 onLoad: function (options) {
        wx.yue.sub("addAddress", function (data) {
            y.setData({
                addAddress: data
            })
        })
 }
/**
 * 生命周期函數(shù)--監(jiān)聽頁面隱藏
 */
 onHide: function () {
    // 取消多余的事件訂閱
    wx.Storage.removeItem("addAddress");
},
 onUnload: function () {
    // 取消多余的事件訂閱
    wx.yue.remove("addAddress");
}

// 傳遞地址頁面獲取好數(shù)據(jù)傳遞
wx.yue.pub("addAddress", data.info);
// 補(bǔ)充跳轉(zhuǎn)返回

注意:使用完成數(shù)據(jù)后要注意卸載，在頁面被關(guān)閉時操作

2.Storage

storage 管理封裝，用法和上面的一致，掛載在全局對象上調(diào)用，使用介紹就不列了

const Storage = {
  //  第一個 key 參數(shù)可以省略，直接傳遞 obj 對象，支持 callback
  setItem: function(key, obj, callback) {
    const getType = function(a) {
      var typeArray = Object.prototype.toString.call(a).split(" ");
      return typeArray[1].slice(0, -1);
    };
    var firstParamType = getType(arguments[0]);
    if (firstParamType === "Object") {
      var keyArrayLength = Object.keys(arguments[0]).length;
      var index = 0;
      for (var keyName in arguments[0]) {
        index++;
        wx.setStorage({
          key: keyName,
          data: arguments[0][keyName],
          success: index == keyArrayLength ? arguments[1] : function() {}
        });
      }
    }
    if (firstParamType === "String") {
      wx.setStorage({
        key: key,
        data: obj,
        success: callback || function() {}
      });
    }
  },
  getItem: function(key) {
    return wx.getStorageSync(key);
  },
  removeItem: function(key) {
    wx.removeStorage({
      key: key
    });
  }
};

例子

wx.Storage.setItem(
  {
    class_pid: that.data.class_pid,
    class_id: that.data.class_id,
    is_import: that.data.is_import,
    shop_type: 1
  },
  function() {
    console.log("Storage 已設(shè)置完畢！");
  }
);

3.filter 計算屬性

小程序也有計算屬性，你知道嗎？

// 文件名稱為 ：filter.wxs
// 不支持es6，Date,Number
function filterOrderTitleName(status) {
  switch (status) {
    case "1":
      return "待支付";
    case "2":
      return "待配送";
    case "3":
      return "配送中";
    case "4":
      return "已完成";
  }
}
function filterPrice(str) {
  // 四舍五入 格式化數(shù)字
  // toFix(8440.55,1) => 8440.6
  var times = Math.pow(10, 2);
  var roundNum = Math.round(str * times) / times;
  return roundNum.toFixed(2);
}

module.exports = {
  filterOrderTitleName: filterOrderTitleName,
  filterPrice: filterPrice
};

使用實(shí)例，過濾處理打折后的金額小數(shù)位數(shù)

// 當(dāng)前文件名：shoppingCart.wxml
// wxs 文件頂部導(dǎo)入

 ￥{{filter.filterPrice(item.plus*100*item.price/1000)}}
    
        會員{{item.dazhe}}折

4.flex Style

分享我常使用的自定義的一套 flex 樣式,快速實(shí)現(xiàn)布局

/* -------------------------------------------------------------flex------------------------------------------------------- */

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 單行水平垂直 */

.oneLineCenter {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
}

/* 單行垂直居中，水平向左 */

.oneLineStart {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-start;
  align-items: center;
}

/* 單行垂直居中，水平向右 */

.oneLineEnd {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  align-items: center;
}

/* 單行垂直居中，水平保持間距 */

.oneLineAround {
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  align-items: center;
}

/* 單行垂直居中，兩端對齊 */

.oneLineBetween {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
}

/* 超過單行設(shè)置的最大寬度，允許換行顯示 */

.f-wrap {
  flex-wrap: wrap;
}

/* 多軸線方向，一般配合  wrap 使用 */

/* 寬度不足換行后，垂直方向靠上排列 */

.mulitLineStart {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

/* 寬度不足換行后，垂直方向居中排列 */

.mulitLineCenter {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  align-content: center;
}

/* 寬度不足換行后，垂直方向靠下排列 */

.mulitLineEnd {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

/* 寬度不足換行后，垂直方向上保持間隔排列 */

.mulitLineAround {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  align-content: space-around;
}

/* 寬度不足換行后，垂直方向上靠兩側(cè)最頂開始間隔排列 */

.mulitLineBetween {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  align-content: space-between;
}

/* 縱軸變主軸，垂直靠上，水平居中 */

.columnStart {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

/* 縱軸變主軸，垂直靠下，水平居中 */

.columnEnd {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

/* 縱軸變主軸，垂直居中，水平居中 */

.columnCenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 縱軸變主軸，垂直間隔排列，水平居中 */

.columnAround {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

/* 縱軸變主軸，垂直上下兩側(cè)按間隔排列，水平居中 */

.columnBetween {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
/* 縱軸變主軸，垂直上下兩側(cè)按間隔排列，水平靠左 */

.columnBetweenStart {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
/* 縱軸變主軸，垂直上下兩側(cè)按間隔排列，水平靠右 */

.columnBetweenEnd {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

5.async await

使用runtime.js，使小程序支持 async await，拷貝文件至項(xiàng)目目錄下。

實(shí)例用法

const regeneratorRuntime = require("../../utils/runtime.js");
Page({
  shopCartInit() {
    var y = this;
    // 拿到商鋪位置信息再去渲染購物計算當(dāng)前的address符合不符合規(guī)定
    var showCartList = function() {
      // 顯示全局的地址信息
      var globalAddress = wx.Storage.getItem("globalAddress");
      if (globalAddress) {
        y.setData({
          globalAddress: globalAddress,
          addr_id: globalAddress.id
        });
        y.calculateDistance(
          qqmapsdk,
          globalAddress.latitude,
          globalAddress.longitude
        );
      } else {
        y.setData({
          globalAddress: {}
        });
      }
    };
    // await 等待獲取商鋪位置信息
    async function getShopPosTionMsg() {
      await util.promiseRequest(api.merchant_addr, {}).then(res => {
        var data = res.data.response_data.lists[0];
        y.setData({
          shop_lat: data.latitude, // 商鋪緯度
          shop_lng: data.longitude, // 商鋪經(jīng)度
          peiSongFanWei: data.scope // 配送范圍
        });
      });
    }

    async function initData() {
      await getShopPosTionMsg();
      await showCartList();
      util.closeLoading();
      y.setData({
        loading: false
      });
    }
    // 開始執(zhí)行
    initData();
  }
});

6.addKey Api

使用自定義屬性的方法輔助完成業(yè)務(wù)邏輯，已發(fā)布至 addKey

/**
 * 為數(shù)組添加新的自定義鍵值以及過濾每個子項(xiàng)的方法
 *
 * @param {*} arr
 * @param {*} obj { isShow:false,isStar:false}
 * @param {*} filterFn
 * @returns
 */
function addKey(sourceArray, extendObj, filterFn) {
  var getType = function(a) {
    var typeArray = Object.prototype.toString.call(a).split(" ");
    return typeArray[1].slice(0, -1);
  };
  var secondParamType = getType(arguments[1]);

  if (!getType(sourceArray) == "Array") {
    throw new Error("The first argument must be an array type");
  }
  if (secondParamType === "Object") {
    return sourceArray.forEach((v, index, sourceArray) => {
      for (var key in extendObj) {
        v[key] = extendObj[key];
      }
      typeof filterFn === "function" ? filterFn(v, index, sourceArray) : "";
    });
  } else if (secondParamType === "Function") {
    return sourceArray.forEach((v, index, sourceArray) => {
      arguments[1](v, index, sourceArray);
    });
  } else {
    return sourceArray;
  }
}

使用實(shí)例

util.addKey(data, { y_isCheck: false }, function(v) {
  v.dazhe = Number(v.plus);
});
this.setData({
  cartList: data
});

7. 組件化復(fù)用開發(fā)實(shí)踐

組件化解構(gòu)項(xiàng)目元件，提高開發(fā)效率,可參照官方介紹起步 !

這里介紹一個自定義的跑馬燈的輪播圖組件實(shí)例

(1) 第一步，查看目錄結(jié)構(gòu)劃分，主要為 Carousel 組件在 index 頁面的使用

│
├───component
│   └───Carousel
│           Carousel.js
│           Carousel.json
│           Carousel.wxml
│           Carousel.wxss
│
├───filter
│       filter.wxs
│
├───pages
│   └───index
│           index.js
│           index.json
│           index.wxml
│           index.wxss
│
└───utils
        api.js
        runtime.js
        util.js

(2) 第二步我們分析看如何使用,設(shè)計組件需要的 props

數(shù)據(jù)項(xiàng)，必須 bannerList

輪播圖的固定高度 swiperHeight

自定義輪播按鈕小點(diǎn)，寬與高一致，圓形 dotWidthAndHeight

輪播按鈕盒子距離頂部的高度 dotTop

最終在 index.wxml 的實(shí)際使用

(3).業(yè)務(wù)代碼編寫

Carousel.json
開啟自定義組件模式

{
  "component": true
}

Carousel.wxml

Carousel.js

Component({
  /**
   * 組件的屬性列表 必須
   */
  properties: {
    bannerList: {
      // 屬性名
      type: Array, // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
      value: [], // 屬性初始值（可選），如果未指定則會根據(jù)類型選擇一個
      observer: function(newVal, oldVal) {} // 屬性被改變時執(zhí)行的函數(shù)（可選），也可以寫成在methods段中定義的方法名字符串, 如："_propertyChange"
    },
    dotWidthAndHeight: String,
    swiperHeight: String, // swiper 高度
    dotTop: String // 小點(diǎn)距離頂部高度
  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    swiperCurrentIndex: 0,
    indicatorDots: false // 自定義輪播按鈕
  },
  /**
   * 組件的方法列表
   */
  methods: {
    swiperChange: function(e) {
      var source = e.detail.source;
      if (source === "autoplay" || source === "touch") {
        this.setData({
          swiperCurrentIndex: e.detail.current
        });
      }
    },
    selectCarouselByIndex: function(e) {
      this.setData({
        swiperCurrentIndex: Number(e.currentTarget.id)
      });
    },
    // 輪播圖跳轉(zhuǎn)至內(nèi)部頁面
    toHref(e) {
      const data = e.currentTarget.dataset;
      // type = 2，根據(jù) goods_id 展示商品詳情
      // type = 3, 展示富文本的活動詳情頁面
      if (data.type === "2") {
        wx.navigateTo({
          url: `../sort_detail/sort_detail?id=${data.id}`
        });
      } else if (data.type === "3") {
        wx.yue.pub("renderData", data.content);
        wx.navigateTo({
          url: `../activity_detail/activity_detail`
        });
      }
    }
  }
});

wxapp-rainbow 安利一下自己寫的小程序組件庫（偏功能性）

uploadImg 上傳圖片

carousel 輪播圖

authorization 授權(quán)登錄

loading 加載中

參考

https://juejin.im/post/5c14b2...

微信小程序自定義組件VS vue組件實(shí)踐與理解

生態(tài)圈

ColorUI 鮮亮的高飽和色彩，專注視覺的小程序組件庫

taro 多端統(tǒng)一開發(fā)框架，支持用 React 的開發(fā)方式編寫一次代碼，生成能運(yùn)行在微信小程序、H5 、 React Native 等的應(yīng)用

uni-app 使用 Vue.js 開發(fā)跨平臺應(yīng)用的前端框架

微信小程序開發(fā)資源匯總

GPU云服務(wù)器云服務(wù)器一個教你開發(fā)小程序的小程序免費(fèi)幫你制作小程序開發(fā)小程序的語言小程序的開發(fā)語言

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102816.html

發(fā)表評論

登陸后可評論

0條評論

DevTalking

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow安裝指定版本

閱讀 1034·2023-04-25 22:27
oeasy教您玩轉(zhuǎn)vim - 67 - # 批量替換

閱讀 880·2021-11-22 14:56
FPAG學(xué)習(xí)筆記——I2C接口實(shí)現(xiàn)

閱讀 996·2021-11-11 16:54
CSS魔法堂：一起玩透偽元素和Content屬性

閱讀 1695·2019-08-30 15:54
MSCI 720

閱讀 3512·2019-08-30 13:20
html處理文字換行

閱讀 1220·2019-08-30 10:55
Dom 事件詳解

閱讀 2091·2019-08-26 13:34
新手教程：linux服務(wù)器搭建Node.js環(huán)境

閱讀 3290·2019-08-26 11:53

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

2019，幫助你更好的開發(fā)小程序

相關(guān)文章

2019 年了，為什么我還在用 jQuery？

2019 年值得學(xué)習(xí)的頂級 JavaScript 框架與主題

2019年云架構(gòu)和云計算趨勢

2019年云架構(gòu)和云計算趨勢

阿里20億小程序繁星計劃你最需要知道的幾個問題（0325更新）

發(fā)表評論

0條評論

DevTalking

男|高級講師

TA的文章

tensorflow安裝指定版本

oeasy教您玩轉(zhuǎn)vim - 67 - # 批量替換

FPAG學(xué)習(xí)筆記——I2C接口實(shí)現(xiàn)

CSS魔法堂：一起玩透偽元素和Content屬性

MSCI 720

html處理文字換行

Dom 事件詳解

新手教程：linux服務(wù)器搭建Node.js環(huán)境

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

2019，幫助你更好的開發(fā)小程序

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

2019，幫助你更好的開發(fā)小程序