因為不太習慣小程序的寫法构哺，過一段時間沒有寫的話就會忘記啊掏，每次都要重新看文檔刃榨，所以在這里記錄下小程序經(jīng)常會用到的組件，防止腦子短路的時候拙绊，什么都亂~

微信開卡組件（會員一鍵開卡）

小程序文檔：文檔-API-開放接口-卡券-會員卡組件https://mp.weixin.qq.com/debug/wxadoc/dev/api/card.html#%E4%BC%9A%E5%91%98%E5%8D%A1%E7%BB%84%E4%BB%B6
https://mp.weixin.qq.com/cgi-bin/announce?action=getannouncement&key=1479824356&version=1&lang=zh_CN&platform=2
微信詳細版本： https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1499332673_Unm7V

image.png

image.png

image.png

image.png

// 在app的onshow中獲取參數(shù)
App({
onShow(opitons){
  if(options.referrerInfo.appId){}
  if(options.referrerInfo.extraData.url == '/pages/index/index')
}
})

第三方平臺發(fā)布小程序代碼注意點

• extJson：記錄自定義屬性【page向图，APPID】
• 流程：微信開發(fā)者工具提交代碼-到開放平臺將草稿箱中的一個模板添加到模板-調(diào)用第三方平臺接口提交代碼包-體驗版二維碼-提交審核-審核通過-發(fā)布過審代碼

scroll-view

這個組件，有時候腦子清醒的時候很容易就看清楚文檔寫出來了标沪，但是有時候卻迷迷糊糊榄攀，越亂越著急，所以在此貼上代碼
這里要注意的點：scroll-view 里面設(shè)置scroll-x金句，然后加一個子層view（此view要設(shè)置具體的高度/寬度檩赢，內(nèi)容的實際寬度，滑動的區(qū)間）

<违寞！-- 橫向滾動-->
 <scroll-view scroll-x scroll-with-animation>
    <view style="width:800px">
        <view class="item">4234</view>
        <view class="item">21234</view>
        <view class="item">000</view>
        <view class="item">111</view>
        <view class="item">5555</view>
        <view class="item">7777</view>
        <view class="item">21</view>
        <view class="item">4234</view>
        <view class="item">9999</view>
        <view class="item">888</view>
    </view>
 </scroll-view>
<!-- 縱向滾動 -->
<scroll-view scroll-y scroll-with-animation>
    <view style="height:100px;">
        <view class="item">7777</view>
        <view class="item">21</view>
        <view class="item">4234</view>
        <view class="item">9999</view>
        <view class="item">888</view>
    </view>
</scroll-view>
.item{
    flex: 0 0 auto;  // 自動適應每個元素的寬度
    display: inline-block;
    // width: 150rpx;
    height: 200rpx;
    margin: 20rpx 10rpx;
    border: 1px solid #ccc;
    text-align: center;
}
// 在安卓設(shè)備上滑動會出現(xiàn)滾動條贞瞒，可以給滾動條設(shè)置樣式，使其隱藏
::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

左滑刪除

https://juejin.im/post/5be81e1251882516f578628a
注意：ios設(shè)備下的z-index無效

swiper 實現(xiàn)跑馬燈效果

<!-- 跑馬燈 -->
    <view class="list">
        <swiper circular="true" previous-margin="70px" next-margin="70px" skip-hidden-item-layout bindchange="handleSwiper">
            <block wx:for="{{imgUrls}}">
                <swiper-item >
                <image src="{{item}}" class="slide-image {{index == current? 'img-active' : ''}}"/>
                </swiper-item>
            </block>
        </swiper>
    </view>

//js
<script>
Page({
  data: {
    current: 0,
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ]
  },
handleSwiper(e) {
    var i = e.detail.current
    this.setData({
      current: i
    })
  }
})

</script>
//css
<style>
.list{
    margin: 30rpx 0 0;
}
.list swiper{
    width: 100%;
    height: 500rpx;
}
.list swiper-item{
    width: 100%;
    height: 100%;
}
.swiper-item{
    width: 80%;
    overflow: auto;
  }
  .slide-image{
    width: 380rpx;
    height: 380rpx;
    margin: 35rpx auto;
    text-align: center;
  }
  .img-active{
    width: 480rpx;
    height: 500rpx;
    margin-top: -50rpx;
    box-shadow: 0 0 10rpx rgba(0,0,0,0.3);
  }
</style>

復制粘貼

wx.setClipboardData(Object object)

wx.setClipboardData({
  data: 'data',
  success(res) {
    wx.getClipboardData({
      success(res) {
        console.log(res.data) // data
      }
    })
  }
})

小程序顯示富文本內(nèi)容

最近小程序也新增了富文本組件【rich-text】坞靶，使用過程中如果圖片過大顯示不全憔狞，可以使用正則表達式做一些適配

<rich-text node="data"></rich-text>
let data = "<p><img src="https://aa.com/aa.png"/></p>";
data = data.replace(/\<img/gi,"<img style='width:100%;height:auto;'");

web-view：在小程序中內(nèi)嵌網(wǎng)頁

<web-view  src="https://baidu.com"></web-view>

image.png

需要先做設(shè)置才能在小程序打開網(wǎng)頁：小程序公眾號后臺--開發(fā)設(shè)置--添加業(yè)務域名【同時下載一份文件放到服務器根目錄下】

在小程序中使用自定義組件

• 建立components文件夾，在里面建立一套小程序文件
• 在index.json中添加 組件標示： { "component": true }
• 在index.js中使用Component組件替代Page彰阴，其他方法跟頁面類似 https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html

Component({
    properties: {
        tabActive: String,
        positionSlug: String,
        groupId: Number
    },
    data: {
        device: ''
    },

    ready() {
        let _this = this
        wx.getSystemInfo({
            success(res) {
                console.log(res.model)
                if (res.model.indexOf('iPhone X') != -1) {
                    _this.setData({
                        device: 'iphoneX'
                    })
                }
            }
        })
    }
})

• 使用組件：在需要引用組件的index.json中添加 usingComponents

    "usingComponents": {
        "navigation-tab": "/pages/components/navigationTab/index"
    }

適應iphone X 底部一欄抬高

// indexOf()方法返回在數(shù)組中可以找到一個給定元素的第一個索引瘾敢，如果不存在，則返回-1尿这。
      let _this = this
      wx.getSystemInfo({
            success(res) {
                console.log(res.model)
                if (res.model.indexOf('iPhone X') != -1) {
                    _this.setData({
                        device: 'iphoneX'
                    })
                }
            }
        })

PHP生成小程序碼

  /**
     * 生成小程序碼
     */
    public function getGoodsMinaCode(Request $request){
        $goods_id = $request->goods_id;
        $goods_sn = $request->goods_sn;
        $this->openPlatform = \EasyWeChat::openPlatform();

        $app = WeChatAuth::query()->where([
            'business_no' => $this->business_no,
            'auth_type'   => 3,
        ])->select('app_id', 'refresh_token')->first();

        $app =  $this->openPlatform->miniProgram($app['app_id'], $app['refresh_token']);
        $response = $app->app_code->get('pages/index/details/index?id=' . $goods_id, []);
//        $response = $app->app_code->getUnlimit('scene-value', [
////            'path' => 'pages/point/gift-record/index'
//            'path' => 'pages/index/details/index?id='.$goods_id
//
//        ]);

        if ($response instanceof \EasyWeChat\Kernel\Http\StreamResponse) {
            $filename = $response->saveAs(public_path('frontend/weChatMall/goodsMinaCode/'.$this->business_no), $goods_sn.'.png');
            $path = 'https://crm.pinkr.com/frontend/weChatMall/goodsMinaCode/'.$this->business_no.'/'.$filename;
            return $this->returnJsonMsg(200,['url'=>$path]);
        }
    }

小程序熱啟動與冷啟動

image.png

更新新版本：wx.getUpdateManager API

• 小程序發(fā)布一個新版本之后簇抵，讓用戶自己的小程序也更新到最新版本
• 小程序冷啟動時如果發(fā)現(xiàn)有新版本，將會異步下載新版本的代碼包射众，并同時用客戶端本地的包進行啟動碟摆，即新版本的小程序需要等下一次冷啟動才會應用上，如果需要馬上應用最新版本叨橱，可以使用wx.getUpdateManager API 進行處理

熱啟動：
用戶已經(jīng)打開過某小程序典蜕，在一定時間內(nèi)（5min）再次打開
此時無需重新啟動断盛，只需要將后臺態(tài)的小程序切換到前臺

冷啟動：
用戶首次打開 / 小程序被微信主動銷毀后 再次打開，
此時小程序需要重新加載啟動

重啟：
小程序沒有重啟的概念愉舔，
當小程序進入后臺钢猛，客戶端會維持一段時間的運行狀態(tài)，超過一定時間后（目前是5min）會被微信主動銷毀
當短時間內(nèi)（5s）連續(xù)收到兩次以上收到系統(tǒng)內(nèi)存告警轩缤，會進行小程序的銷毀
一命迈、運行機制

小程序啟動會有兩種情況，一種是「冷啟動」火的，一種是「熱啟動」壶愤。
假如用戶已經(jīng)打開過某小程序，然后在一定時間內(nèi)（五分鐘）再次打開該小程序馏鹤，此時無需重新啟動征椒，只需將后臺態(tài)的小程序切換到前臺，這個過程就是熱啟動假瞬；
冷啟動指的是用戶首次打開或小程序被微信主動銷毀后再次打開的情況陕靠，此時小程序需要重新加載啟動迂尝。

小程序沒有重啟的概念
當小程序進入后臺脱茉，客戶端會維持一段時間的運行狀態(tài)，超過一定時間后（目前是5分鐘）會被微信主動銷毀
當短時間內(nèi)（5s）連續(xù)收到兩次以上收到系統(tǒng)內(nèi)存告警垄开，會進行小程序的銷毀
二琴许、更新機制

小程序冷啟動時如果發(fā)現(xiàn)有新版本，將會異步下載新版本的代碼包溉躲，并同時用客戶端本地的包進行啟動榜田，即新版本的小程序需要等下一次冷啟動才會應用上套硼。 如果需要馬上應用最新版本砰左，可以使用 wx.getUpdateManager API 進行處理。

小程序分包

分包是為了優(yōu)化首次加載小程序包的速度狸涌，后面按需加載

// 在app.json中疑枯，在pages[] 后面辩块，加上subpackages， 
// root 是分包的根目錄荆永，name是分包名稱
"subpackages": [{
            "root": "pages/livePlayer",
            "name": "livePlayer",
            "pages": [
                "list/index"
            ],
            "plugins": {
                "live-player-plugin": {
                    "version": "1.0.4",
                    "provider": "wx2b03c6e691cd7370"
                }
            }
        }

圖片懶加載

小程序官方有個懶加載废亭，只需要在image標簽加上lazy-load="true"即可
注意，swiper中不能用懶加載具钥，只能在列表中用

    <image src="{{item.img}}" mode="widthFix" class="min-img" lazy-load="true"></image>

骨架屏

https://github.com/jayZOU/skeleton
小程序中引入骨架屏組件豆村，然后判斷是否顯示，給元素并設(shè)置類名：.skeleton-rect / .skeleton-radius

自定義組件

生命周期
created: function(){}, // 組件在內(nèi)存中創(chuàng)建完畢執(zhí)行
attached: function(){}, // 組件掛載之前執(zhí)行
ready: function() {}, // 組件掛載后執(zhí)行
detached: function(){}, // 組件移除執(zhí)行
moved: function(){}, // 組件移動的時候執(zhí)行

小程序官網(wǎng)中并沒有明確地說明組件的生命周期骂删，通過查閱資料掌动，內(nèi)容大致如下:

• created 組件實例化四啰，但節(jié)點樹還未導入，因此這時不能用setData
• attached 節(jié)點樹完成粗恢，可以用setData渲染節(jié)點拟逮，但無法操作節(jié)點
• ready(不是onReady) 組件布局完成，這時可以獲取節(jié)點信息适滓，也可以操作節(jié)點
• moved 組件實例被移動到樹的另一個位置
• detached 組件實例從節(jié)點樹中移除

組件所在頁面的生命周期

pageLifeTimes: {
  show(){},
  hide(){}
}

image.png

小程序所在頁面的生命周期

image.png

全局配置分享設(shè)置

微信小程序沒有全局分享配置敦迄，頁面開啟分享功能必須要在頁面中定義分享事件函數(shù) onShareAppMessage 才可以。如果項目中對頁面分享的需求比較復雜點凭迹，那么默認的自定義分享會很麻煩的罚屋，而且還不一定能滿足我們的需求，因此全局自定義分享配置的實現(xiàn)就非常有必要了嗅绸。
不僅僅能實現(xiàn)全局分享脾猛，還可以對不同頁面實現(xiàn)不同的分享配置

image.png

//  utils/shareConfig.js： 重寫分享方法
var overShare = (that) => {
  // that 為app.js傳進來的變量
  // 定義非全局分享的頁面: 這些頁面的分享將會按照單個頁面中寫的onShareAppMessage方法去執(zhí)行轉(zhuǎn)發(fā)
  let noGlobalShare = [
    'pages/A/index',
    'pages/B/index'
  ]
  
  // 監(jiān)聽路由切換, 間接實現(xiàn)全局設(shè)置分享內(nèi)容
  wx.onAppRoute(function (res) {
    let pages = getCurrentPages(),
        view = pages[pages.length - 1],  //獲取當前頁面的對象
        routerUrl,  // 當前頁面路由
        options;  // 當前頁面參數(shù)
    if (view) {
      routerUrl = view.route // 當前頁面路由
      options = view.options;
      // 如果頁面帶有參數(shù)，則做好url拼接
      if(Object.keys(options) && Object.keys(options).length > 0) {
        routerUrl += '?'
        for(let key in options) {
          if(key) {
            routerUrl = routerUrl + key + '=' + options[key] + '&'
          }
        }
        routerUrl = routerUrl.substr(0, routerUrl.length - 1)
      }
      if(!noGlobalShare.includes(view.route)) {
        // 分享配置
        view.onShareAppMessage = function () {
            return {
                title: '分享配置標題',
                imageUrl: '分享配置圖片',
                path: routerUrl,
            };
        }
        view.onShareTimeline = function () {
            return {
                title: '分享配置標題',
                imageUrl: '分享配置圖片',
                path: routerUrl,
            };
        }
      }
    }
  })
}

module.exports = overShare

// 在app.js 中的onLaunch調(diào)用
// 給所有頁面配置分享到朋友圈（這里因為有些頁面沒有寫這個方法鱼鸠，所以先給全局頁面都增加）
var PageTmp = Page;
Page = function (pageConfig) {
  pageConfig = Object.assign({
    onShareTimeline: function () {}
  },pageConfig);
  PageTmp(pageConfig);
};

import overShare from './utils/shareConfig';
App({
  onLaunch() {
    overShare(this)
  }
})