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

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
            }
        })
    }
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,670评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,928评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,926评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,238评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,112评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,138评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,545评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,232评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,496评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,596评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,369评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,226评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,600评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,906评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,185评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,516评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,721评论 2 335

推荐阅读更多精彩内容