1.授權(quán)

在未授權(quán)情況下，首次進入會調(diào)起小程序原生權(quán)限授權(quán)彈框，后面進入則不會再彈出，so，在用戶拒絕授權(quán)后，后面進入需要引導(dǎo)用戶開啟相應(yīng)的權(quán)限，才能進行下一步的操作。

（以保存圖片到相冊權(quán)限為例）

//授權(quán)
    onSaveImg: function() {
        let _this = this;
        wx.getSetting({
            success: function(res) {
                if (res.authSetting['scope.writePhotosAlbum'] != undefined && res.authSetting['scope.writePhotosAlbum'] != true) {
                    wx.showModal({
                        title: '提示',
                        content: '本次操作需要保存到相冊權(quán)限，請確認(rèn)授權(quán)',
                        success: function(res) {
                            if (res.cancel) {
                                wx.showToast({
                                    title: '取消授權(quán)',
                                    icon: 'none'
                                })
                            } else if (res.confirm) {
                                wx.openSetting({
                                    success: function(dataAu) {
                                        if (dataAu.authSetting["scope.writePhotosAlbum"] == true) {
                                            wx.showToast({
                                                title: '授權(quán)成功',
                                                icon: 'success'
                                            })
                                            _this.authSaveImg();
                                        } else {
                                            wx.showToast({
                                                title: '授權(quán)失敗',
                                                icon: 'none'
                                            })
                                        }
                                    }
                                })
                            }
                        }
                    })
                } else if (res.authSetting['scope.writePhotosAlbum'] == undefined) {
                    _this.authSaveImg();
                } else {
                    _this.authSaveImg();
                }
            },
            fail(res) {
                //調(diào)用接口失敗
                  }
        })
    },
    //保存圖片
    authSaveImg: function() {
        let _this = this;
        wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success: function(res) {
                let imgUrl = _this.data.imgUrl;
                wx.downloadFile({
                    url: imgUrl ,
                    success: function(res) {
                        wx.saveImageToPhotosAlbum({
                            filePath: res.tempFilePath,
                            success: function(res) {
                                wx.showToast({
                                    title: '保存成功'
                                })
                            }
                        })
                    }
                })
            },
            fail(res) {
                console.log(res)
                wx.showToast({
                    title: '授權(quán)失敗',
                    icon: 'none'
                })
            }
        })
    }

2.全面屏適配（兼容）

        //app.js
onLaunch: function() {
      wx.getSystemInfo({//獲取手機屏幕信息
            success: res => {
                if (res.screenHeight - res.windowHeight - res.statusBarHeight - 32 > 72) {
                    this.globalData.isFullScreen = true;//是全面屏
                }
            },
            fail(err) {
                console.log(err);
            }
        })
  }


        //index.wxml
<view class="btmBar {{isFullScreen?'fullScreenClass':''}}">  //底部固定按鈕
</view>

        //app.wxss
/* 全面屏適配 */
.fullScreenClass{
    padding-bottom: 68rpx!important;
}

3.自定義頂部導(dǎo)航欄

頂部導(dǎo)航欄根據(jù)機型不同，距離頂部的距離也不同。通常來說是與小程序的膠囊按鈕在同一水平線上

//app.js
onLaunch: function() {
   let menuButtonObject = wx.getMenuButtonBoundingClientRect();//獲取膠囊按鈕的位置
   this.globalData.topDistance = menuButtonObject.top;
  }

//custom.json
{
  "navigationStyle":"custom"
}

//custom.wxml
<view class="topBar" style="top:{{topDistance}}px">
</view>

//custom.wxss
.topBar {
    position: fixed;
    left:0;
    z-index: 999;
}

4.使用犸良（lottie）動畫到小程序

首先需要安裝讓微信小程序可以調(diào)用lottie.js的動畫的npm插件，npm i -S lottie-miniapp;
然后把下載的json動畫文件用編輯器打開復(fù)制，去https://json-to-js.com/轉(zhuǎn)為js數(shù)據(jù)。再把數(shù)據(jù)放到j(luò)s文件夾（lottie.js）中用module.exports ={ //轉(zhuǎn)化的js數(shù)據(jù)}格式導(dǎo)出。

//index.wxml
 <canvas class="animate" id="animate-canvas" canvas-id="animate-canvas"></canvas>

//index.wxss
.animate{
    width: 750rpx;
    height: 750rpx;
}

//index.js
const Lottie = require('../../miniprogram_npm/lottie-miniapp/index.js').default
const Animation = require('../../utils/lottie.js');

onLoad: function() {
        const canvasContext = wx.createCanvasContext('animate-canvas');
        canvasContext.canvas = {
            width: 375,
            height: 375
        };
        lottie.loadAnimation({
            renderer: 'canvas', 
            loop: true,
            autoplay: true,
            animationData: animationData,
            rendererSettings: {
                context: canvasContext,
                clearCanvas: true
            }
        })
    }