• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序开发 --- 小白之路 --- 心得

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

1.前言

今天 ,发现我的饭卡不见了。。。。悲催 ,看了一下学校的微信小程序,查了下我这饭卡的流水记录,嗯。。。最后出现的地方在洗澡房。。。

好吧,扯远了,虽然没找到,可是突发奇想 ,小程序挺方便的,我能不能做一个?

。。。。。

事实上,充钱就行!!!

百度搜了一下关于微信小程序的开发教程。。。显示的基本上是广告,都是小程序外包。。。我有钱还自己开发?笑话!!!贫穷使我自力更生!!!

。。。。。

直接去博客找资料,总有那么几个前辈把路给我们铺好了,只是有些是桥,有些是泥巴路,喀喀喀,总比没有好。

 

这位前辈 详细介绍了微信小程序能干什么  ,博文原址  :  https://www.cnblogs.com/jingwhale/p/11255805.html

 

。。。。反正一开始我看的是一脸懵逼。。。。

2.话不多说,看看效果

    

我做的小程序名字叫岑惜  

 

 

 

 

 

跳转进入登录页

 

 

 好了。。。其他就不展示了 ,其实想要做这个小程序,其实蛮简单的 ,说到底还是需要成本的,因为访问外链的话 ,是需要去微信公众平台 认证域名 ,还有要有 https协议的域名才可以访问 。。。这就很蛋疼了。。。

算一下帐 ,

(1)需要认证https ,则必须 有SSL证书,需要买的,个人可以免费一年 ,企业的则需要几千块钱,记得以前看的是4千块钱左右,具体看官网报价,

(2)需要认证ssl证书,那么需要有一个已经备案的域名才可以,域名10到80块不等 ;

(3)想要绑定域名并且成功备案,那么最少需要租一年服务器,有学生优惠还好,需要120左右 ,如果没有学生优惠,那就贵了,一年服务器需要1千到3千不等,
算了一下,如果不是学生大概需要六千多一年的运营成本,如果是学生,需要200左右, 如果想要接入支付入口,则还需要支付300块钱的手续费。。。。。

好吧,我觉得,如果不是要商用,没必要自己开一个可以发布的小程序,太贵了,完全可以使用开发者模式,自娱自乐就够了,当前,有钱人可以当我没说!!!

 3.开发者权限认证

需要登录微信公众号平台,网址  :  https://mp.weixin.qq.com/

需要先注册

 

 

 

 

 

填写信息,跟着一步一步来就可以了 ,邮箱可以使用qq邮箱

 

 

 注册好了之后,返回主页,可以 用微信扫描登录

 

 

登陆后的页面,进入主页,

菜单栏找到设置,填写信息

 

 

记住你的小程序id ,这很重要 ,在开发者工具里面需要认证的

 

 现在去获取开发者权限

菜单找到   开发

 

 设置开发者id ,上传密码、服务器域名信息 ,

 

 

 

基本的设置差不多了,还有其他设置自己琢磨,我就不演示了,

3.下载开发者工具

网址 : https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

选择需要的系统版本,建议下载稳定版

 

 

下载后安装,傻瓜式一键安装 ,安装完开启,直接就是微信扫码界面了

 

 

4.新建小程序工程

 

 

 

 

 

 信息填写好,点击新建,然后等待加载开发页面 ,看起来有点像浏览器,其实更像android开发工具

 

 我应该做个目录说明

 

 有个 login和chi文件夹 ,那是我自己建的页面,

每个页面的文件应该都放在一个文件夹里,这样不会乱

,就像这样

 

5.新建页面

 那么问题来了 ,怎么创建新页面?

在pages文件夹 右键,新建文件夹 ,

 

 我新建了一个叫 newPage的文件夹

 

 

 右键这文件夹,选择新建 Page

 

 填写名字,最好是与文件夹名字一致,回车确定

 

 

 

 

6.修改小程序标题

 

需要去全局变量才能修改标题  ,所有的页面都写着pages里面,一般会自动添加,但是不会自动删除,需要手动修改,不然报错无法运行

 

 7.跳到下一页

如何进入下一页?需要 在js文件控制页面跳转 ,使用 vue.js一样的语法 ,控制 页面组件

我这里做一个 点击 文字 “欢迎进入岑惜随笔” 就会进入下一页面  【当然,也可以做一个计时器 自动跳转页面】

先看看 js怎么写 【这是默认的初始页,对应的页面名是 index】

 

 

自定义做了个方法  toLogin 

 

 现在需要去wxml文件绑定触发组件

 

修改文件后,点击保存

 

 打开手机微信后 ,点击真机测试 

 

 

 

手机授权后,等一会手机就会自动弹出小程序运行啦 ,啦啦啦啦,也可以使用开发工具的小程序页面展示窗口操作,其实那就是一个手机模拟器

8.跳回指定的上一页

在微信默认方法  onUnload 设置

 

 

9.如何使用外链访问呢?

很简单

在wxml文件一句话即可 ,那是个浏览器容器 ,缺点是 会将整个屏幕占有,无法设置窗口大小

 

 网址我写在 js文件里

 

 访问 效果

 

10.从外链主动回到小程序

那么,如果想要从外链主动回到小程序怎么实现呢?

微信已经做好了很多由js调用微信的接口了,这个浏览器容器其实类似于标签 《iframe》 ,可以在外链调用js脚本接口回到小程序,

但是需要加载微信做好的js脚本

可以使用《script》网址加载,

 <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

也可以写在本地加载

完整的js源码

!function (e, n) {
    "function" == typeof define && (define.amd || define.cmd) ? define(function () {
        return n(e)
    }) : n(e, !0)
}(this, function (e, n) {
    function i(n, i, t) {
        e.WeixinJSBridge ? WeixinJSBridge.invoke(n, o(i), function (e) {
            c(n, e, t)
        }) : u(n, t)
    }

    function t(n, i, t) {
        e.WeixinJSBridge ? WeixinJSBridge.on(n, function (e) {
            t && t.trigger && t.trigger(e), c(n, e, i)
        }) : t ? u(n, t) : u(n, i)
    }

    function o(e) {
        return e = e || {}, e.appId = C.appId, e.verifyAppId = C.appId, e.verifySignType = "sha1", e.verifyTimestamp = C.timestamp + "", e.verifyNonceStr = C.nonceStr, e.verifySignature = C.signature, e
    }

    function r(e) {
        return {
            timeStamp: e.timestamp + "",
            nonceStr: e.nonceStr,
            package: e.package,
            paySign: e.paySign,
            signType: e.signType || "SHA1"
        }
    }

    function a(e) {
        return e.postalCode = e.addressPostalCode, delete e.addressPostalCode, e.provinceName = e.proviceFirstStageName, delete e.proviceFirstStageName, e.cityName = e.addressCitySecondStageName, delete e.addressCitySecondStageName, e.countryName = e.addressCountiesThirdStageName, delete e.addressCountiesThirdStageName, e.detailInfo = e.addressDetailInfo, delete e.addressDetailInfo, e
    }

    function c(e, n, i) {
        "openEnterpriseChat" == e && (n.errCode = n.err_code), delete n.err_code, delete n.err_desc, delete n.err_detail;
        var t = n.errMsg;
        t || (t = n.err_msg, delete n.err_msg, t = s(e, t), n.errMsg = t), (i = i || {})._complete && (i._complete(n), delete i._complete), t = n.errMsg || "", C.debug && !i.isInnerInvoke && alert(JSON.stringify(n));
        var o = t.indexOf(":");
        switch (t.substring(o + 1)) {
            case"ok":
                i.success && i.success(n);
                break;
            case"cancel":
                i.cancel && i.cancel(n);
                break;
            default:
                i.fail && i.fail(n)
        }
        i.complete && i.complete(n)
    }

    function s(e, n) {
        var i = e, t = v[i];
        t && (i = t);
        var o = "ok";
        if (n) {
            var r = n.indexOf(":");
            "confirm" == (o = n.substring(r + 1)) && (o = "ok"), "failed" == o && (o = "fail"), -1 != o.indexOf("failed_") && (o = o.substring(7)), -1 != o.indexOf("fail_") && (o = o.substring(5)), "access denied" != (o = (o = o.replace(/_/g, " ")).toLowerCase()) && "no permission to execute" != o || (o = "permission denied"), "config" == i && "function not exist" == o && (o = "ok"), "" == o && (o = "fail")
        }
        return n = i + ":" + o
    }

    function d(e) {
        if (e) {
            for (var n = 0, i = e.length; n < i; ++n) {
                var t = e[n], o = h[t];
                o && (e[n] = o)
            }
            return e
        }
    }

    function u(e, n) {
        if (!(!C.debug || n && n.isInnerInvoke)) {
            var i = v[e];
            i && (e = i), n && n._complete && delete n._complete, console.log(\'"\' + e + \'",\', n || "")
        }
    }

    function l(e) {
        if (!(w || T || C.debug || x < "6.0.2" || V.systemType < 0)) {
            var n = new Image;
            V.appId = C.appId, V.initTime = A.initEndTime - A.initStartTime, V.preVerifyTime = A.preVerifyEndTime - A.preVerifyStartTime, N.getNetworkType({
                isInnerInvoke: !0,
                success: function (e) {
                    V.networkType = e.networkType;
                    var i = "https://open.weixin.qq.com/sdk/report?v=" + V.version + "&o=" + V.isPreVerifyOk + "&s=" + V.systemType + "&c=" + V.clientVersion + "&a=" + V.appId + "&n=" + V.networkType + "&i=" + V.initTime + "&p=" + V.preVerifyTime + "&u=" + V.url;
                    n.src = i
                }
            })
        }
    }

    function p() {
        return (new Date).getTime()
    }

    function f(n) {
        k && (e.WeixinJSBridge ? n() : I.addEventListener && I.addEventListener("WeixinJSBridgeReady", n, !1))
    }

    function m() {
        N.invoke || (N.invoke = function (n, i, t) {
            e.WeixinJSBridge && WeixinJSBridge.invoke(n, o(i), t)
        }, N.on = function (n, i) {
            e.WeixinJSBridge && WeixinJSBridge.on(n, i)
        })
    }

    function g(e) {
        if ("string" == typeof e && e.length > 0) {
            var n = e.split("?")[0], i = e.split("?")[1];
            return n += ".html", void 0 !== i ? n + "?" + i : n
        }
    }

    if (!e.jWeixin) {
        var h = {
                config: "preVerifyJSAPI",
                onMenuShareTimeline: "menu:share:timeline",
                onMenuShareAppMessage: "menu:share:appmessage",
                onMenuShareQQ: "menu:share:qq",
                onMenuShareWeibo: "menu:share:weiboApp",
                onMenuShareQZone: "menu:share:QZone",
                previewImage: "imagePreview",
                getLocation: "geoLocation",
                openProductSpecificView: "openProductViewWithPid",
                addCard: "batchAddCard",
                openCard: "batchViewCard",
                chooseWXPay: "getBrandWCPayRequest",
                openEnterpriseRedPacket: "getRecevieBizHongBaoRequest",
                startSearchBeacons: "startMonitoringBeacons",
                stopSearchBeacons: "stopMonitoringBeacons",
                onSearchBeacons: "onBeaconsInRange",
                consumeAndShareCard: "consumedShareCard",
                openAddress: "editAddress"
            }, v = function () {
                var e = {};
                for (var n in h) e[h[n]] = n;
                return e
            }(), I = e.document, S = I.title, y = navigator.userAgent.toLowerCase(), _ = navigator.platform.toLowerCase(),
            w = !(!_.match("mac") && !_.match("win")), T = -1 != y.indexOf("wxdebugger"),
            k = -1 != y.indexOf("micromessenger"), M = -1 != y.indexOf("android"),
            P = -1 != y.indexOf("iphone") || -1 != y.indexOf("ipad"), x = function () {
                var e = y.match(/micromessenger\/(\d+\.\d+\.\d+)/) || y.match(/micromessenger\/(\d+\.\d+)/);
                return e ? e[1] : ""
            }(), A = {initStartTime: p(), initEndTime: 0, preVerifyStartTime: 0, preVerifyEndTime: 0}, V = {
                version: 1,
                appId: "",
                initTime: 0,
                preVerifyTime: 0,
                networkType: "",
                isPreVerifyOk: 1,
                systemType: P ? 1 : M ? 2 : -1,
                clientVersion: x,
                url: encodeURIComponent(location.href)
            }, C = {}, L = {_completes: []}, B = {state: 0, data: {}};
        f(function () {
            A.initEndTime = p()
        });
        var O = !1, E = [], N = {
            config: function (e) {
                C = e, u("config", e);
                var n = !1 !== C.check;
                f(function () {
                    if (n) i(h.config, {verifyJsApiList: d(C.jsApiList)}, function () {
                        L._complete = function (e) {
                            A.preVerifyEndTime = p(), B.state = 1, B.data = e
                        }, L.success = function (e) {
                            V.isPreVerifyOk = 0
                        }, L.fail = function (e) {
                            L._fail ? L._fail(e) : B.state = -1
                        };
                        var e = L._completes;
                        return e.push(function () {
                            l()
                        }), L.complete = function (n) {
                            for (var i = 0, t = e.length; i < t; ++i) e[i]();
                            L._completes = []
                        }, L
                    }()), A.preVerifyStartTime = p(); else {
                        B.state = 1;
                        for (var e = L._completes, t = 0, o = e.length; t < o; ++t) e[t]();
                        L._completes = []
                    }
                }), m()
            }, ready: function (e) {
                0 != B.state ? e() : (L._completes.push(e), !k && C.debug && e())
            }, error: function (e) {
                x < "6.0.2" || (-1 == B.state ? e(B.data) : L._fail = e)
            }, checkJsApi: function (e) {
                var n = function (e) {
                    var n = e.checkResult;
                    for (var i in n) {
                        var t = v[i];
                        t && (n[t] = n[i], delete n[i])
                    }
                    return e
                };
                i("checkJsApi", {jsApiList: d(e.jsApiList)}, (e._complete = function (e) {
                    if (M) {
                        var i = e.checkResult;
                        i && (e.checkResult = JSON.parse(i))
                    }
                    e = n(e)
                }, e))
            }, onMenuShareTimeline: function (e) {
                t(h.onMenuShareTimeline, {
                    complete: function () {
                        i("shareTimeline", {
                            title: e.title || S,
                            desc: e.title || S,
                            img_url: e.imgUrl || "",
                            link: e.link || location.href,
                            type: e.type || "link",
                            data_url: e.dataUrl || ""
                        }, e)
                    }
                }, e)
            }, onMenuShareAppMessage: function (e) {
                t(h.onMenuShareAppMessage, {
                    complete: function (n) {
                        "favorite" === n.scene ? i("sendAppMessage", {
                            title: e.title || S,
                            desc: e.desc || "",
                            link: e.link || location.href,
                            img_url: e.imgUrl || "",
                            type: e.type || "link",
                            data_url: e.dataUrl || ""
                        }) : i("sendAppMessage", {
                            title: e.title || S,
                            desc: e.desc || "",
                            link: e.link || location.href,
                            img_url: e.imgUrl || "",
                            type: e.type || "link",
                            data_url: e.dataUrl || ""
                        }, e)
                    }
                }, e)
            }, onMenuShareQQ: function (e) {
                t(h.onMenuShareQQ, {
                    complete: function () {
                        i("shareQQ", {
                            title: e.title || S,
                            desc: e.desc || "",
                            img_url: e.imgUrl || "",
                            link: e.link || location.href
                        }, e)
                    }
                }, e)
            }, onMenuShareWeibo: function (e) {
                t(h.onMenuShareWeibo, {
                    complete: function () {
                        i("shareWeiboApp", {
                            title: e.title || S,
                            desc: e.desc || "",
                            img_url: e.imgUrl || "",
                            link: e.link || location.href
                        }, e)
                    }
                }, e)
            }, onMenuShareQZone: function (e) {
                t(h.onMenuShareQZone, {
                    complete: function () {
                        i("shareQZone", {
                            title: e.title || S,
                            desc: e.desc || "",
                            img_url: e.imgUrl || "",
                            link: e.link || location.href
                        }, e)
                    }
                }, e)
            }, startRecord: function (e) {
                i("startRecord", {}, e)
            }, stopRecord: function (e) {
                i("stopRecord", {}, e)
            }, onVoiceRecordEnd: function (e) {
                t("onVoiceRecordEnd", e)
            }, playVoice: function (e) {
                i("playVoice", {localId: e.localId}, e)
            }, pauseVoice: function (e) {
                i("pauseVoice", {localId: e.localId}, e)
            }, stopVoice: function (e) {
                i("stopVoice", {localId: e.localId}, e)
            }, onVoicePlayEnd: function (e) {
                t("onVoicePlayEnd", e)
            }, uploadVoice: function (e) {
                i("uploadVoice", {localId: e.localId, isShowProgressTips: 0 == e.isShowProgressTips ? 0 : 1}, e)
            }, downloadVoice: function (e) {
                i("downloadVoice", {serverId: e.serverId, isShowProgressTips: 0 == e.isShowProgressTips ? 0 : 1}, e)
            }, translateVoice: function (e) {
                i("translateVoice", {localId: e.localId, isShowProgressTips: 0 == e.isShowProgressTips ? 0 : 1}, e)
            }, chooseImage: function (e) {
                i("chooseImage", {
                    scene: "1|2",
                    count: e.count || 9,
                    sizeType: e.sizeType || ["original", "compressed"],
                    sourceType: e.sourceType || ["album", "camera"]
                }, (e._complete = function (e) {
                    if (M) {
                        var n = e.localIds;
                        try {
                            n && (e.localIds = JSON.parse(n))
                        } catch (e) {
                        }
                    }
                }, e))
            }, getLocation: function (e) {
            }, previewImage: function (e) {
                i(h.previewImage, {current: e.current, urls: e.urls}, e)
            }, uploadImage: function (e) {
                i("uploadImage", {localId: e.localId, isShowProgressTips: 0 == e.isShowProgressTips ? 0 : 1}, e)
            }, downloadImage: function (e) {
                i("downloadImage", {serverId: e.serverId, isShowProgressTips: 0 == e.isShowProgressTips ? 0 : 1}, e)
            }, getLocalImgData: function (e) {
                !1 === O ? (O = !0, i("getLocalImgData", {localId: e.localId}, (e._complete = function (e) {
                    if (O = !1, E.length > 0) {
                        var n = E.shift();
                        wx.getLocalImgData(n)
                    }
                }, e))) : E.push(e)
            }, getNetworkType: function (e) {
                var n = function (e) {
                    var n = e.errMsg;
                    e.errMsg = "getNetworkType:ok";
                    var i = e.subtype;
                    if (delete e.subtype, i) e.networkType = i; else {
                        var t = n.indexOf(":"), o = n.substring(t + 1);
                        switch (o) {
                            case"wifi":
                            case"edge":
                            case"wwan":
                                e.networkType = o;
                                break;
                            default:
                                e.errMsg = "getNetworkType:fail"
                        }
                    }
                    return e
                };
                i("getNetworkType", {}, (e._complete = function (e) {
                    e = n(e)
                }, e))
            }, openLocation: function (e) {
                i("openLocation", {
                    latitude: e.latitude,
                    longitude: e.longitude,
                    name: e.name || "",
                    address: e.address || "",
                    scale: e.scale || 28,
                    infoUrl: e.infoUrl || ""
                }, e)
            }, getLocation: function (e) {
                e = e || {}, i(h.getLocation, {type: e.type || "wgs84"}, (e._complete = function (e) {
                    delete e.type
                }, e))
            }, hideOptionMenu: function (e) {
                i("hideOptionMenu", {}, e)
            }, showOptionMenu: function (e) {
                i("showOptionMenu", {}, e)
            }, closeWindow: function (e) {
                i("closeWindow", {}, e = e || {})
            }, hideMenuItems: function (e) {
                i("hideMenuItems", {menuList: e.menuList}, e)
            }, showMenuItems: function (e) {
                i("showMenuItems", {menuList: e.menuList}, e)
            }, hideAllNonBaseMenuItem: function (e) {
                i("hideAllNonBaseMenuItem", {}, e)
            }, showAllNonBaseMenuItem: function (e) {
                i("showAllNonBaseMenuItem", {}, e)
            }, scanQRCode: function (e) {
                i("scanQRCode", {
                    needResult: (e = e || {}).needResult || 0,
                    scanType: e.scanType || ["qrCode", "barCode"]
                }, (e._complete = function (e) {
                    if (P) {
                        var n = e.resultStr;
                        if (n) {
                            var i = JSON.parse(n);
                            e.resultStr = i && i.scan_code && i.scan_code.scan_result
                        }
                    }
                }, e))
            }, openAddress: function (e) {
                i(h.openAddress, {}, (e._complete = function (e) {
                    e = a(e)
                }, e))
            }, openProductSpecificView: function (e) {
                i(h.openProductSpecificView, {pid: e.productId, view_type: e.viewType || 0, ext_info: e.extInfo}, e)
            }, addCard: function (e) {
                for (var n = e.cardList, t = [], o = 0, r = n.length; o < r; ++o) {
                    var a = n[o], c = {card_id: a.cardId, card_ext: a.cardExt};
                    t.push(c)
                }
                i(h.addCard, {card_list: t}, (e._complete = function (e) {
                    var n = e.card_list;
                    if (n) {
                        for (var i = 0, t = (n = JSON.parse(n)).length; i < t; ++i) {
                            var o = n[i];
                            o.cardId = o.card_id, o.cardExt = o.card_ext, o.isSuccess = !!o.is_succ, delete o.card_id, delete o.card_ext, delete o.is_succ
                        }
                        e.cardList = n, delete e.card_list
                    }
                }, e))
            }, chooseCard: function (e) {
                i("chooseCard", {
                    app_id: C.appId,
                    location_id: e.shopId || "",
                    sign_type: e.signType || "SHA1",
                    card_id: e.cardId || "",
                    card_type: e.cardType || "",
                    card_sign: e.cardSign,
                    time_stamp: e.timestamp + "",
                    nonce_str: e.nonceStr
                }, (e._complete = function (e) {
                    e.cardList = e.choose_card_info, delete e.choose_card_info
                }, e))
            }, openCard: function (e) {
                for (var n = e.cardList, t = [], o = 0, r = n.length; o < r; ++o) {
                    var a = n[o], c = {card_id: a.cardId, code: a.code};
                    t.push(c)
                }
                i(h.openCard, {card_list: t}, e)
            }, consumeAndShareCard: function (e) {
                i(h.consumeAndShareCard, {consumedCardId: e.cardId, consumedCode: e.code}, e)
            }, chooseWXPay: function (e) {
                i(h.chooseWXPay, r(e), e)
            }, openEnterpriseRedPacket: function (e) {
                i(h.openEnterpriseRedPacket, r(e), e)
            }, startSearchBeacons: function (e) {
                i(h.startSearchBeacons, {ticket: e.ticket}, e)
            }, stopSearchBeacons: function (e) {
                i(h.stopSearchBeacons, {}, e)
            }, onSearchBeacons: function (e) {
                t(h.onSearchBeaco 

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序-WebSocket应用发布时间:2022-07-18
下一篇:
微信小程序 常见问题 小结发布时间:2022-07-18
热门推荐
    热门话题
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap