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

风大不出门 發表於 2020-5-16 18:37:00

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

<h1>1.前言</h1>
今天，发现我的饭卡不见了。。。。悲催，看了一下学校的微信小程序，查了下我这饭卡的流水记录，嗯。。。最后出现的地方在洗澡房。。。
好吧，扯远了，虽然没找到，可是突发奇想，小程序挺方便的，我能不能做一个？
。。。。。
事实上，充钱就行！！！
百度搜了一下关于微信小程序的开发教程。。。显示的基本上是广告，都是小程序外包。。。我有钱还自己开发？笑话！！！贫穷使我自力更生！！！
。。。。。
直接去博客找资料，总有那么几个前辈把路给我们铺好了，只是有些是桥，有些是泥巴路，喀喀喀，总比没有好。
 
这位前辈详细介绍了微信小程序能干什么  ，博文原址  ：  https://www.cnblogs.com/jingwhale/p/11255805.html
 
。。。。反正一开始我看的是一脸懵逼。。。。
<h1>2.话不多说，看看效果</h1>
 <img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516150638420-217145644.png">   
我做的小程序名字叫岑惜  
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516150830617-110051642.png">
 
 
 
 
 
跳转进入登录页
 
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516150948276-715173998.png">
 
 好了。。。其他就不展示了，其实想要做这个小程序，其实蛮简单的，说到底还是需要成本的，因为访问外链的话，是需要去微信公众平台认证域名，还有要有 https协议的域名才可以访问。。。这就很蛋疼了。。。
算一下帐，
（1）需要认证https ,则必须有SSL证书，需要买的，个人可以免费一年，企业的则需要几千块钱，记得以前看的是4千块钱左右，具体看官网报价，
（2）需要认证ssl证书,那么需要有一个已经备案的域名才可以，域名10到80块不等；
（3）想要绑定域名并且成功备案，那么最少需要租一年服务器，有学生优惠还好，需要120左右，如果没有学生优惠，那就贵了，一年服务器需要1千到3千不等， 算了一下，如果不是学生大概需要六千多一年的运营成本，如果是学生，需要200左右，如果想要接入支付入口，则还需要支付300块钱的手续费。。。。。
好吧，我觉得，如果不是要商用，没必要自己开一个可以发布的小程序，太贵了，完全可以使用开发者模式，自娱自乐就够了，当前，有钱人可以当我没说！！！
<h1> 3.开发者权限认证</h1>
需要登录微信公众号平台，网址  ：  https://mp.weixin.qq.com/
需要先注册
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516152950612-1060104214.png">
 
 
 <img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516153021687-1396902252.png">
 
 
填写信息，跟着一步一步来就可以了，邮箱可以使用qq邮箱
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516153036297-2022009115.png">
 
 
 注册好了之后，返回主页，可以用微信扫描登录
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516153226864-734240987.png">
 
 
登陆后的页面，进入主页，
菜单栏找到设置，填写信息
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516153509321-970023275.png">
 
 
记住你的小程序id ,这很重要，在开发者工具里面需要认证的
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516153728099-1129359306.png">
 
 现在去获取开发者权限
菜单找到   开发
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516153942664-950105704.png">
 
 设置开发者id ,上传密码、服务器域名信息，
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516154101752-238604042.png">
 
 
 
基本的设置差不多了，还有其他设置自己琢磨，我就不演示了，
<h1>3.下载开发者工具</h1>
网址 : https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
选择需要的系统版本，建议下载稳定版
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516154308841-281336311.png">
 
 
下载后安装，傻瓜式一键安装，安装完开启，直接就是微信扫码界面了
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516154527848-1642666552.png">
 
<h1> </h1>
<h1>4.新建小程序工程</h1>
 
 
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516154634481-1735102725.png">
 
 <img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516154825096-1589963753.png">
 
 信息填写好，点击新建，然后等待加载开发页面，看起来有点像浏览器，其实更像android开发工具
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516154950408-681527308.png">
 
 我应该做个目录说明
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516155919044-1412721945.png">
 
 有个 login和chi文件夹，那是我自己建的页面，
每个页面的文件应该都放在一个文件夹里，这样不会乱
，就像这样
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516160050781-1722714350.png">
 
<h1>5.新建页面</h1>
 那么问题来了，怎么创建新页面？
在pages文件夹右键，新建文件夹，
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516160406552-2084373469.png">
 
 我新建了一个叫 newPage的文件夹
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516160459661-553575144.png">
 
 
 右键这文件夹，选择新建 Page
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516160611811-1366446552.png">
 
 填写名字，最好是与文件夹名字一致，回车确定
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516160713755-2029315962.png">
 
 
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516160834292-150770001.png">
 
 
<h1>6.修改小程序标题</h1>
 
需要去全局变量才能修改标题  ，所有的页面都写着pages里面，一般会自动添加，但是不会自动删除，需要手动修改，不然报错无法运行
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516161855476-360810504.png">
 
<h1> 7.跳到下一页</h1>
如何进入下一页？需要在js文件控制页面跳转，使用 vue.js一样的语法，控制页面组件
我这里做一个点击文字 “欢迎进入岑惜随笔” 就会进入下一页面  【当然，也可以做一个计时器自动跳转页面】
先看看 js怎么写【这是默认的初始页，对应的页面名是 index】
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516162508546-665150200.png">
 
 
自定义做了个方法  toLogin 
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516162704181-918314751.png">
 
 现在需要去wxml文件绑定触发组件
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516162813907-638198067.png">
 
修改文件后，点击保存
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516171340652-732659301.png">
 
 打开手机微信后，点击真机测试 
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516171428496-2130444717.png">
 
 <img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516171446884-1350412144.png">
 
手机授权后，等一会手机就会自动弹出小程序运行啦，啦啦啦啦，也可以使用开发工具的小程序页面展示窗口操作，其实那就是一个手机模拟器
<h1>8.跳回指定的上一页</h1>
在微信默认方法  onUnload 设置
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516171925076-1920136564.png">
 
 
<h1>9.如何使用外链访问呢？</h1>
很简单
在wxml文件一句话即可，那是个浏览器容器，缺点是会将整个屏幕占有，无法设置窗口大小
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516172040721-2075801605.png">
 
 网址我写在 js文件里
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516172153720-1678015366.png">
 
 访问效果
 <img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516180815152-452911166.png">
<h1>10.从外链主动回到小程序</h1>
那么，如果想要从外链主动回到小程序怎么实现呢？
微信已经做好了很多由js调用微信的接口了，这个浏览器容器其实类似于标签《iframe》 ,可以在外链调用js脚本接口回到小程序，
但是需要加载微信做好的js脚本
可以使用《script》网址加载，
 <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
也可以写在本地加载
完整的js源码
<div class="cnblogs_code"><img src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_b87add22-902d-4c0b-a53a-8799ef87bb01" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_b87add22-902d-4c0b-a53a-8799ef87bb01" class="cnblogs_code_hide">
<pre>!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;
 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, o = h;
 o && (e = o)
 }
 return e
 }
}

function u(e, n) {
 if (!(!C.debug || n && n.isInnerInvoke)) {
 var i = v;
 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] = 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();
 L._completes = []
 }, L
 }()), A.preVerifyStartTime = p(); else {
 B.state = 1;
 for (var e = L._completes, t = 0, o = e.length; t < o; ++t) e();
 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;
 t && (n = n, delete n)
 }
 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, 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;
 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, 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.onSearchBeacons, e)
 }, openEnterpriseChat: function (e) {
 i("openEnterpriseChat", {useridlist: e.userIds, chatname: e.groupName}, e)
 }, launchMiniProgram: function (e) {
 i("launchMiniProgram", {targetAppId: e.targetAppId, path: g(e.path), envVersion: e.envVersion}, e)
 }, miniProgram: {
 navigateBack: function (e) {
 e = e || {}, f(function () {
 i("invokeMiniProgramAPI", {name: "navigateBack", arg: {delta: e.delta || 1}}, e)
 })
 }, navigateTo: function (e) {
 f(function () {
 i("invokeMiniProgramAPI", {name: "navigateTo", arg: {url: e.url}}, e)
 })
 }, redirectTo: function (e) {
 f(function () {
 i("invokeMiniProgramAPI", {name: "redirectTo", arg: {url: e.url}}, e)
 })
 }, switchTab: function (e) {
 f(function () {
 i("invokeMiniProgramAPI", {name: "switchTab", arg: {url: e.url}}, e)
 })
 }, reLaunch: function (e) {
 f(function () {
 i("invokeMiniProgramAPI", {name: "reLaunch", arg: {url: e.url}}, e)
 })
 }, postMessage: function (e) {
 f(function () {
 i("invokeMiniProgramAPI", {name: "postMessage", arg: e.data || {}}, e)
 })
 }, getEnv: function (n) {
 f(function () {
 n({miniprogram: "miniprogram" === e.__wxjs_environment})
 })
 }
 }
 }, b = 1, R = {};
 return I.addEventListener("error", function (e) {
 if (!M) {
 var n = e.target, i = n.tagName, t = n.src;
 if (("IMG" == i || "VIDEO" == i || "AUDIO" == i || "SOURCE" == i) && -1 != t.indexOf("wxlocalresource://")) {
 e.preventDefault(), e.stopPropagation();
 var o = n["wx-id"];
 if (o || (o = b++, n["wx-id"] = o), R) return;
 R = !0, wx.ready(function () {
 wx.getLocalImgData({
 localId: t, success: function (e) {
 n.src = e.localData
 }
 })
 })
 }
 }
 }, !0), I.addEventListener("load", function (e) {
 if (!M) {
 var n = e.target, i = n.tagName;
 n.src;
 if ("IMG" == i || "VIDEO" == i || "AUDIO" == i || "SOURCE" == i) {
 var t = n["wx-id"];
 t && (R = !1)
 }
 }
 }, !0), n && (e.wx = e.jWeixin = N), N
}
});</pre>
</div>
View Code</div>
 
那么问题来了，怎么调用呢？
新建一个js 文件，封装一个方法，【这样有利于做其他逻辑处理】
<img alt="" data-src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516182012758-665531553.png">
 
 
那么问题又来了，既然是网页，不仅浏览器可以使用，其他应用也可以使用，那么如何区别是不是微信小程序进来呢？
这个好办，在进入外链的时候，网址参数加入可以识别的标志或参数，如
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516182527461-887847465.png">
 
 在进入的页面对网址做一个检查，如果包含该字符串，则在cookie标记为由微信小程序进来的
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516182720711-2101686820.png">
 
 到了敏感页面。即按历史返回键需要回到小程序的页面时，需要对页面返回键做一个判断操作，
我之所以这样写，是因为需求是小程序可以在这个页面后退触发返回小程序操作，如果不是小程序【比如浏览器、app内置浏览器等】，则不允许返回操作，防止页面后退才这样写
<img src="https://img2020.cnblogs.com/blog/1620438/202005/1620438-20200516182903371-1062092389.png">
 
 因为无法显示视频，动态图我又懒得做，所以就不展示测试页面了
 
<h1>11.总结</h1>
其实这微信小程序仍然是类似于应用app开发，可以全部使用app原生组件或微信的一套语言开发，用前后端分离模式开发；
也可以使用浏览器容器，由外链进入网站，形成一个app壳+Web开发的一个模式，好处就是开发简单，内容丰富，同时配合微信提供的接口可以调用手机权限，又不影响浏览器对网站的访问，算是一个引流的作用了！！！
 
 
 
 
-------------------------------------------------
参考博文原址：
https://zhidao.baidu.com/question/1801861578486509987.html
https://www.jianshu.com/p/244fcc9de68f
https://blog.csdn.net/Say_one/article/details/88352599
https://honker.blog.csdn.net/article/details/105498670
 

</div>
<div id="MySignature" role="contentinfo">
本文来自博客园，作者：岑惜，转载请注明原文链接：https://www.cnblogs.com/c2g5201314/p/12900470.html
响应开源精神相互学习，内容良币驱除劣币 
来源：https://www.cnblogs.com/c2g5201314/p/12900470.html

頁: [1]

琼殿技术论坛's Archiver

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