如何获取微信小店小程序的AppID

2017年11月16日,微信有一个重磅的宣布:为了帮商家在微信内快速开店,方便商家和用户之间沟通,所有认证公众号,可快速创建微信小店小程序。这个改变是否能给微信小店带来新的生机?还需要时间的考验。微信小店并不是凭空冒出来的,2014年5月29日,微信推出微信小店,在当时,引发了电商圈剧烈的地震,让有赞、微店、微盟等第三方微信电商服务商惶惶不可终日,害怕腾讯越俎代庖,让自己无路可走;同时,微商们欢呼雀跃,觉得微信终于有了自己的微信平台卖货;自媒体们不怕事大,大肆炒作腾讯推出微信小店是为了阻击淘宝,打击阿里。然后呢,就没有然后了,微信小店最终沉寂了,简陋的设计,路径单一,让微信小店完全失去了优势。

此次推出的微信小店小程序,能否让微信小店复生? 我持乐观的态度。不过一个月去过了,在试用微店小程序后,我感到有些失望,程序很不稳定,经常报错,产品的详情内容无法排版,没有换行,更别说支持html了,无法更换小程序头像,看上去极其简陋,我有些看不懂为什么微信会这么匆忙推出这么不完善的产品?抢占市场?这么差的产品体验,比起有赞之类的小程序商城,根本上不了台面。

产品体验差也就算了,最大的问题是入口的问题,似乎只能通过公众号的关联来访问,后台没有提供AppID,无法关联其他的小程序,也无法通过其他小程序来跳转?按微信小程序的设计来看,每个小程序都提供AppID的,那么如何找到微信小店小程序的AppID呢?有个比较曲折的办法。

获取微信小店小程序的AppID

在微信小店小程序的后台管理,进入“货架管理”,用手机微信扫描未发布的货架二维码(如果没有货架,可以新建一个)。

打开体验版的微信小店小程序后,点击右上角的三点,选择“打开调试”;

此时会退出微信小店小程序,再次打开,然后点开“vConsole”,就可以看到调试信息了;

在调试信息你会发现微信小店的appid和各个页面page的路径。

微信小店小程序不支持排版,咋办?

从微信小店小程序的调试信息来看,小程序没有启用rich-text组件,所以不支持html的解析

都是view组件

既然不支持富文本,就不用文字排版,用图片来替代,把商品的详情全部用图片来搞,这里推荐锤子便签,输入文字和贴图,最后生成一张图片,非常方便。

为什么有时候打开会显示加载失败?

这是小程序的严重bug,都上线一个月了还没有修复,从调试信息看,是请求失败,这个只能等待微信开发团队来修复了。

最后,希望微信小店程序能更大的改进和完善

老规矩,先看本节效果图 我们实现这个支付功能完全是借助小程序云开发实现的,不用搭建自己的服务器,不用买域名,不用备案域名,不用支持https。只需要一个简单的云函数,就可以轻松的实现微信程序支付功能。 核心代码就下面这些 一,创建一个云开发小程序 关于如何创建云开发小程序,这里我就不再做具体讲解。不知道怎么创建云开发小程序的同学,可以去翻看我之前的文章,或者看下我录制的视频:https://edu.csdn.net/course/play/9604/204528 创建云开发小程序有几点注意的 1,一定不要忘记在app.js里初始化云开发环境。 2,创建完云函数后,一定要记得上传 二, 创建支付的云函数 1,创建云函数pay 三,引入三方依赖tenpay 我们这里引入三方依赖的目的,是创建我们支付时需要的一些参数。我们安装依赖是使用里npm 而npm必须安装node,关于如何安装node,我这里不做讲解,百度一下,网上一大堆。 1,首先右键pay,然后选择在终端中打开 2,我们使用npm来安装这个依赖。 在命令行里执行 npm i tenpay 安装完成后,我们的pay云函数会多出一个package.json 文件 到这里我们的tenpay依赖就安装好了。 四,编写云函数pay 完整代码如下 //云开发实现支付 const cloud = require('wx-server-sdk') cloud.init() //1,引入支付的三方依赖 const tenpay = require('tenpay'); //2,配置支付信息 const config = { appid: '你的小程序appid', mchid: '你的微信商户号', partnerKey: '微信支付安全密钥', notify_url: '支付回调网址,这里可以先随意填一个网址', spbill_create_ip: '127.0.0.1' //这里填这个就可以 }; exports.main = async(event, context) => { const wxContext = cloud.getWXContext() let { orderid, money } = event; //3,初始化支付 const api = tenpay.init(config); let result = await api.getPayParams({ out_trade_no: orderid, body: '商品简单描述', total_fee: money, //订单金额(分), openid: wxContext.OPENID //付款用户的openid }); return result; } 一定要注意把appid,mchid,partnerKey换成你自己的。 到这里我们获取程序支付所需参数的云函数代码就编写完成了。 不要忘记上传这个云函数。 出现下图就代表上传成功 五,写一个简单的页面,用来提交订单,调用pay云函数。 这个页面很简单, 1,自己随便编写一个订单号(这个订单号要大于6位) 2,自己随便填写一个订单价(单位是分) 3,点击按钮,调用pay云函数。获取支付所需参数。 下图是官方支付api所需要的一些必须参数。 下图是我们调用pay云函数获取的参数,和上图所需要的是不是一样。 六,调用wx.requestPayment实现支付 下图是官方的示例代码 这里不在做具体讲解了,完整的可以看视频。 实现效果 1,调起支付键盘 2,支付完成 3,log日志,可以看出不同支付状态的回调 上图是支付成功的回调,我们可以在支付成功回调时,改变订单支付状态。 下图是支付失败的回调, 下图是支付完成的状态。 到这里我们就轻松的实现了微信程序的支付功能了。是不是很简单啊,完整的讲解可以看视频。
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页