微信小程序商城开发常见问题汇总

1.授权

在未授权情况下，首次进入会调起小程序原生权限授权弹框，后面进入则不会再弹出，so，在用户拒绝授权后，后面进入需要引导用户开启相应的权限，才能进行下一步的操作。

（以保存图片到相册权限为例）

//授权
    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: '本次操作需要保存到相册权限，请确认授权',
                        success: function(res) {
                            if (res.cancel) {
                                wx.showToast({
                                    title: '取消授权',
                                    icon: 'none'
                                })
                            } else if (res.confirm) {
                                wx.openSetting({
                                    success: function(dataAu) {
                                        if (dataAu.authSetting["scope.writePhotosAlbum"] == true) {
                                            wx.showToast({
                                                title: '授权成功',
                                                icon: 'success'
                                            })
                                            _this.authSaveImg();
                                        } else {
                                            wx.showToast({
                                                title: '授权失败',
                                                icon: 'none'
                                            })
                                        }
                                    }
                                })
                            }
                        }
                    })
                } else if (res.authSetting['scope.writePhotosAlbum'] == undefined) {
                    _this.authSaveImg();
                } else {
                    _this.authSaveImg();
                }
            },
            fail(res) {
                //调用接口失败
                  }
        })
    },
    //保存图片
    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: '授权失败',
                    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.自定义顶部导航栏

顶部导航栏根据机型不同，距离顶部的距离也不同。通常来说是与小程序的胶囊按钮在同一水平线上

//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）动画到小程序

首先需要安装让微信小程序可以调用lottie.js的动画的npm插件，npm i -S lottie-miniapp;
然后把下载的json动画文件用编辑器打开复制，去https://json-to-js.com/转为js数据。再把数据放到js文件夹（lottie.js）中用module.exports ={ //转化的js数据}格式导出。

//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
            }
        })
    }