分享到微信
使用微信扫码将网页分享到微信
这是晓头条的第 11 期
忙碌的 5 个工作日结束，终于迎来 11 月第一个周末！
就在 11 月 2 日晚，微信又搞了一个大新闻。这次，大家千呼万唤的小程序「内嵌网页」Web View 功能，终于开放了！
知晓程序赶紧试了一下这个新功能，结果仅用 1 个小时就做出了可打开网页「无需审核」的电商小程序！
不过，虽然微信开放了这个新能力，但它的限制也不少。本期晓头条，知晓程序（微信号 zxcx0101）带你来看看，这个新能力到底怎么玩。
除了新能力，本周不管是小程序、微信还是其他公司，都有很多新鲜事等你发掘：
特斯拉也推出了一款小程序，买不起也可以用它申请试驾（反正不花钱）。
公众号后台「附近的小程序」功能改版，以后要在其他后台进行管理。
微信和支付宝双双宣布在港扩展支付业务，现在你可以在打车时候用它们付钱了。
本周新商业领域，还有什么新鲜事？现在，就来与知晓程序（微信号 zxcx0101）一起来看看吧。
小程序新鲜事
1. 小程序新增 Web View 组件，关联公众号上限提升
11 月 2 日晚，微信官方宣布，小程序开放「内嵌网页」能力。
现在，如果需要在小程序中内嵌网页，开发者需要这样做：
先在小程序后台进入「设置」-「开发设置」，配置允许小程序内直接访问网页的「业务域名」。
开发小程序时，在 WXML 中使用 &web-view& 组件内嵌浏览器网页，域名必须为配置好的「业务域名」。
&web-view src="https://mp.weixin.qq.com/"&&/web-view&
&web-view src=”https://mp.weixin.qq.com/”&&/web-view&
知晓程序（微信号 zxcx0101）还发现，微信还为内嵌至小程序的网页提供了一系列 JSSDK 接口，开发者可以利用这些接口，在网页中实现小程序操控的能力（包括导航、多媒体、地理位置等）。
为了防止开发者绕过微信支付、使用其他第三方支付渠道，微信还要求开发者配置「业务域名」时，需在网站根目录放置相应验证文件进行验证。
值得注意的是，该能力目前不针对个人类型与海外类型的小程序开放；未正确配置「业务域名」的小程序，也无法在开发者工具中测试相应组件。
另外，根据知晓程序（微信号 zxcx0101）可靠消息源的消息，小程序关联公众号的上限也在当晚提升至 500 个，可以说是「任性关联」了。
2. 特斯拉出了一款小程序，可以申请试驾、找充电桩
近日，特斯拉宣布推出了一款小程序。在小程序中，你可以申请预约试驾最新款的特斯拉电动车。
同时，针对目前电动车的充电站较少的问题，特斯拉车主还可以在小程序中，直接查找所在城市、目的地附近的充电站和服务中心。
「特斯拉 Tesla」小程序使用链接
3. 全国首个微信电子诉讼文书送达小程序上线
10 月 30 日，「三亚智慧法院电子送达平台」小程序上线。
作为全国首个微信电子诉讼文书送达小程序，它实现了在信息采集、身份验证、文书处理等方面非常实用的功能。
据悉，这款小程序是三亚市中级人民法院与三亚市司法局深度合作，携手腾讯公司共同打造的。
「三亚智慧法院电子送达平台」小程序使用链接
4. 美团推「小区守卫」小程序，希望解决外卖小哥进小区的安全问题
近日，美团推出「小区守卫」小程序。在该小程序中，小区保安可以轻松验证美团骑手身份并放行，物业管理员也可以查询到小区保安的放行记录。
据悉，这是美团对优化封闭小区内订单的体验进行的尝试。在以往，因担心有不法分子「伪装」成外卖骑手进入小区，对小区安全造成威胁。
公众号资讯
1. 公众号后台即将撤销「展示场景」内「附近的小程序」功能
有公众号运营者发现，公众号后台的「附近的小程序」功能即将撤销。在公众号后台小程序「展示场景」管理页面中，可以看到微信官方的相关通告。
功能合并后，如果运营者希望修改微信客户端中「附近的小程序」展示位置，可以在公众号「门店小程序」功能插件，或小程序后台中的「附近的小程序」进行设置。
2. 公众号「石榴婆报告」试水小程序电商，未正式宣布就有营业额
近日，「石榴婆报告」公众号宣布其小程序电商：「石榴小卖部」小程序。而从「公众号关联通知」发送到正式宣布的一小时内，「石榴小卖部」小程序已经拥有上万销售额。
据悉，「石榴小卖部」小程序并不涉及传统电商供应链、客服服务，也就是说，「石榴婆报告」只负责「石榴小卖部」小程序的货品挑选。
3. 三个月第二次更名，情感公众号「一个人听」更名「蕊希」
10 月 31 日，情感大号「一个人听」继更名为「1 分之二」后，又再次更名为「蕊希」，这是该公众号三个月内第二次更名。
2015 年 3 月，公众号「一个人听」开始正式进行运营，并在一年多的时间内获得了 100 万粉丝。2016 年 11 月，该公众号宣布获得 200 万粉丝。
微信新动态
1. 微信支付宝同时宣布升级在港服务
10 月 31 日，WeChat Pay HK（微信支付香港钱包）在香港宣布推出一系列升级支付功能。只要开通了微信支付港币支付，用户就可以使用港币，进行付款码支付、二维码收款。
同时，微信支付还支持大陆用户直接注册、开通香港帐户。只需在微信支付的帮助中心中选择「港币帐户」，就可以找到开通香港帐户。
就在微信宣布该消息的前一天，支付宝也在其微信公众号宣布，可在香港使用支付宝打车。与微信不同的是，用户需要下载专用的「支付宝 HK」App，才能完成港币帐户开通和使用。
2. 在微信也支持投资股票了，开户、投资都能完成
11 月 1 日，「腾讯理财通」公众号发布图片，宣布推出「腾讯微证券」公众号。
在公众号中，除了可以查询自选股走势，用户还可以登录招商证券和华林证券两家券商的股票帐户，并通过拍摄身份证、刷脸等方式，验证开户。
3. 微信广告推硬件产品推广解决方案
10 月 31 日，「微信广告」公众号发布文章，宣布微信广告推出为 3C 手机行业定制的社交营销模型。
在文章中，微信广告展示了包括小米、苹果等厂商利用朋友圈广告、微信互动广告、微信卡券所打造的各种案例。
大公司新动作
1. 全国首例《王者荣耀》外挂刑事案件落地，4人犯罪团伙被抓
近日，腾讯守护者计划安全团队协助江阴警方，成功破获一起制作、出售《王者荣耀》游戏外挂软件的犯罪案件，抓获 4 位犯罪嫌疑人。
在侦破过程中，警方缴获《王者荣耀》游戏外挂源码、APK 软件和注册激活码等数据，以及作案笔记本 4 台、台式机 3 台、手机 8 部。
2. 马化腾发公开信，呼吁打造「数字生态共同体」
在「2017 腾讯全球合作伙伴大会」开幕前夕，腾讯董事会主席兼 CEO 马化腾发表致合作伙伴的公开信。
在公开信中，马化腾用「深度融合」、「云化分享」、「智慧连接」等七大关键词分享他对数字经济的思考，并呼吁行业从零和博弈的「窄平台」向共赢共生的「宽平台」转变，从而形成一个「数字生态共同体」。
在公开信中，他还同时透露腾讯将推出「去中心化」的智慧零售解决方案，以帮助商家真正拥有自主运营流量与粉丝的能力，破除目前零售行业中的「窄平台」规则。
3. 爱奇艺发布 2018 内容战略，要在内容投资 100 亿
10 月 31 日，爱奇艺举办「2017 爱奇艺 iJOY 悦享会」。在大会上，爱奇艺发布 2018 年电视剧、综艺、娱乐内容生态布局和超过 200 项内容。
其中，爱奇艺宣布由《中国有嘻哈》团队原班人马打造的《热血街舞团》将于 2018 年 3 月上线，由爱奇艺和微博联合打造。
在会后的媒体采访中，爱奇艺还宣布，将在内容领域持续投资超过 100 亿元。
4. 小猪短租完成 1.2 亿美元融资，成为新「独角兽」
11 月 1 日，房屋分享住宿平台小猪短租宣布完成 1.2 亿美元新一轮融资。本轮融资由云锋基金领投，部分原有股东增持，泰合资本担任独家财务顾问。
小猪短租是一个类似 Airbnb（爱彼迎）的在线短租平台，成立于 2012 年，截止 2017 年上半年，该平台房源覆盖逾 400 个海内外目的地。
关注「知晓程序」公众号 ，在微信后台回复「晓头条」，获取本周微信新鲜事。
扫一扫分享到微信
净干文科生事情的理科生，悲观的乐观主义者，希望成为路人的铺路石，不矛盾的矛盾体。
累计已发布 216 篇文章
最近文章：
使用微信扫码关注爱范儿微信公众号
版权所有 & 广州爱范儿科技股份有限公司 2008 - 2018。以商业目的使用爱范儿网站内容需获许可。非商业目的使用授权遵循 CC BY-NC 4.0。
All content is made available under the CC BY-NC 4.0 for non-commercial use. Commercial use of this content is prohibited without explicit permission.
Designed by
Design Studio.
关注 if Design Studio.
微信扫码关注公众号 if Design Studio.
关注爱范儿微信号，连接热爱，关注这个时代最好的产品。
想让你的手机好用到哭？关注这个号就够了。
关注玩物志微信号，就是让你乱花钱。
小程序开发快人一步。
最好的微信新商业服务平台。无所不能 健康点 运动家
分享到微信朋友圈
微信小程序开放内嵌网页 电商急更新迎战双十一
马化腾刚刚说完要破除零售行业“窄平台”，微信就给电商小程序送去了大礼。图/视觉中国
英文报道相关报道
　　本文1173字，订阅读者尊享
　　【财新网】（记者 周淇隽）刚刚说完要破除零售行业“窄平台”，就给电商小程序送去了大礼。11月2日晚间，微信公众平台官方微信号发布了一句话消息“为方便开发者灵活配置小程序，小程序现开放内嵌网页能力。”具体内容非常简单——“开发者登录小程序后台配置业务域名后，即可实现小程序内嵌网页。”
　　所谓“内嵌网页”即小程序内可以直接打开网页。对于小程序开发者来说，这是巨大的赋能，而目前最激动的小程序品类当属电商小程序。
责任编辑：屈运栩 | 版面编辑：刘明晖
此篇文章很值赞赏激励一下首席赞赏官虚位以待赞赏是一种态度1元3元6元12元50元108元其他金额金额（元）：点击发送赞赏
财新传媒版权所有。如需刊登转载请点击右侧按钮，提交相关信息。经确认即可刊登转载。
财新私房课
caixinenergy
caixin-life
全站点击排行榜
全站评论排行榜详细介绍微信小程序使用WEB-VIEW控件进行微信支付
1.获取用户的openID，在小程序项目index.js里面写入
onLoad: function (options) {
wx.login({
//获取code
success: (res) =& {
wx.request({
method: "GET",
url: 'https://xxx.xxx.xxx/GetOpenID.aspx', //仅为示例，并非真实的接口地址
scode: res.code
// 使用wx.login得到的登陆凭证，用于换取openid
'content-type': 'application/json' // 默认值
success: (res) =& {
if (res.data!='0')
this.setData({
sopenid: res.data,
url: 'https://xxxx.xxx.xxx/?openid=' + res.data
console.log(this.data.sopenid)
console.log(res.code) //这里只是为了在微信小程序客户端好查看结果，找寻问题
2.getopenid.aspx
protected void Page_Load(object sender, EventArgs e)
var _APP_ID = "";
// 你申请的小程序ID
var _APP_SECRET = "";
// 小程序的SECRET ，当然这个是可微信公共平台去生成的
var url = string.Format("https://api.weixin.qq.com/sns/jscode2session?appid={0}&secret={1}&js_code={2}&grant_type=authorization_code", _APP_ID, _APP_SECRET, Utils.SafeString(Request["scode"]));
HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(url);
request.Method = "Get";
// 这里是定义请求的方式
HttpWebResponse response = request.GetResponse() as HttpWebR
//对请求返回的结果进行处理
Stream io = response.GetResponseStream();
StreamReader sr = new StreamReader(io, Encoding.UTF8);
var html = sr.ReadToEnd();
//返回的内容被读取为流
sr.Close();
io.Close();
response.Close();
string key = "\"openid\":\"";
int stratindex = html.IndexOf(key);
//截取字符
if (stratindex != -1)
//验证是否存在OpenID ，有时使用过期的登陆凭证，会出现异常
int endindex = html.IndexOf("\"}", stratindex);
// 这里在截取字符时，要注意内容是否和截取的部分相同，否则截取会失败
string _openid = html.Substring(stratindex + key.Length, endindex - stratindex - key.Length);
Response.Write(_openid);
Response.Write("0");
catch (Exception ex)
Utils.WriteLog(DateTime.Now+"----error:" + ex);
Response.Write("0");
3.上面已经让我们获取到了用户的openId,接下来就用微信小程序支付的同意下单接口下单，之后根据下单之后返回的prepay_id拼接一个字符串：str = "?timestamp=" +timestamp+ "&nonceStr=" + wx_nonceStr + "&prepay_id=" +prepay_id+
"&signType=MD5" + "&paySign=" + get_sign + "&orderId=";
页面加入：&script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"&&/script&
使web-view可以使用wx.miniProgram.navigateTo({ url: path });跳转到小程序的页面：
var params = '&%=str %&';
var path = '/pages/wxpay/wxpay' +
//通过JSSDK的api使小程序跳转到指定的小程序页面
wx.miniProgram.navigateTo({ url: path });
4.在小程序里面添加wxpay页面，wxpay.js的代码为
// pages/wxpay/wxpay.js
* 页面的初始数据
* 生命周期函数--监听页面加载
onLoad: function (options) {
var that =
//页面加载调取微信支付（原则上应该对options的携带的参数进行校验）
that.requestPayment(options);
//根据 obj 的参数请求wx 支付
requestPayment: function (obj) {
//获取options的订单Id
var orderId = obj.orderId;
console.log('prepay_id=' + obj.prepay_id);
console.log('prepay_id=' + obj.timestamp);
//调起微信支付
wx.requestPayment({
//相关支付参数
'timeStamp': obj.timestamp,
'nonceStr': obj.nonceStr,
'package': 'prepay_id=' + obj.prepay_id,
'signType': obj.signType,
'paySign': obj.paySign,
//小程序微信支付成功的回调通知
'success': function (res) {
//定义小程序页面集合
var pages = getCurrentPages();
//当前页面 (wxpay page)
var currPage = pages[pages.length - 1];
//上一个页面 （index page）
var prevPage = pages[pages.length - 2];
//通过page.setData方法使index的webview 重新加载url
有点类似于后台刷新页面
//此处有点类似小程序通过加载URL的方式回调通知后端 该订单支付成功。后端逻辑不做赘述。
prevPage.setData({
url: "https://xxx.xxxx.xxxxx/PayOk.aspx?orderId=" + orderId,
//小程序主动返回到上一个页面。即从wxpay page到index page。此时index page的webview已经重新加载了url 了
//微信小程序的page 也有栈的概念navigateBack 相当于页面出栈的操作
wx.navigateBack();
//小程序支付失败的回调通知
'fail': function (res) {
console.log("支付失败");
console.log(res);
var pages = getCurrentPages();
var currPage = pages[pages.length - 1];
var prevPage = pages[pages.length - 2];
console.log("准备修改数据");
prevPage.setData({
url: "https://xxx.xxx.xxx/PayFial.aspx?orderId=" + orderId,
console.log("准备结束页面")
wx.navigateBack();
* 生命周期函数--监听页面初次渲染完成
onReady: function () {
* 生命周期函数--监听页面显示
onShow: function () {
* 生命周期函数--监听页面隐藏
onHide: function () {
* 生命周期函数--监听页面卸载
onUnload: function () {
* 页面相关事件处理函数--监听用户下拉动作
onPullDownRefresh: function () {
* 页面上拉触底事件的处理函数
onReachBottom: function () {
* 用户点击右上角分享
onShareAppMessage: function () {
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！浅谈小程序内嵌网页及内嵌网页跳转分享实现
上个月，开发内嵌web页面的功能，这个对于很多微信开发者都是个重大消息。最近两天，笔者项目中有这样一个需求，支持小程序内嵌网页，并且在内嵌网页中多次跳转，分享后，点开还是在跳转之后的网页。对于这样一个新技术，还是充满好奇，既然老大说了要做，那就尝试去做呗。
首先，当然是参考微信小程序的api。
&web-view src="https://mp.weixin.qq.com/"&&/web-view&
其实使用起来特别简单，只需在页面中放入这样一个标签即可，其中src一定是要在小程序管理中心配置过的。特别注意一下，web-view会占满整个页面，不管这个页面有什么其它的东西，都不会展示出来。
好了。有了这个可以开始进入需求实现的阶段了。对于分享功能，做过小程序开发的都不会陌生，在需要被分享的页面js中加入onShareAppMessage这样一个事件即可。
在 Page 中定义 onShareAppMessage 函数，设置该页面的转发信息。
只有定义了此事件处理函数，右上角菜单才会显示 “转发” 按钮
用户点击转发按钮的时候会调用
此事件需要 return 一个 Object，用于自定义转发内容
示例代码如下：
onShareAppMessage: function (res) {
if (res.from === 'button') {
// 来自页面内转发按钮
console.log(res.target)
title: '自定义转发标题',
path: '/page/user?id=123',
success: function(res) {
// 转发成功
fail: function(res) {
// 转发失败
但是存在web-view时，onShareAppMessage回调函数参数res中还会多一个webViewUrl
onShareAppMessage(options) {
console.log(options.webViewUrl)
看了这么多api，心里也有数了，就开始愉快的撸代码了。很快，内嵌网页分享的功能就是实现出来了。
onShareAppMessage(options) {
var that = this
var return_url = options.webViewUrl
title: that.data.title,
path: return_url,
success: function (res) {
that.web_url = return_url
// 转发成功
wx.showToast({
title: "转发成功",
icon: 'success',
duration: 2000
fail: function (res) {
// 转发失败
就在感叹自己是多么牛x，一下子就搞出来的时候，发现离需求还差一点。需要实现内嵌网页内多次跳转分享的功能，这就需要自己想办法了。在小程序分享中又不能保持状态，这个得去记录分享时网页的路径。其实有点开发经验的都能想到这个办法，那就是使用？在url后记录下来，这样在其它用户打开转发小程序的时候，取出其中的参数，将web-view中的src替换成这个就行了。话不多说，直接上代码。
web_url:"",
title: '测试内嵌分享',
web_src:''
onShareAppMessage(options) {
var that = this
var return_url = options.webViewUrl
var path = '/page/test/test?return_url=' + encodeURIComponent(return_url)
console.log(path, options)
title: that.data.title,
path: path,
success: function (res) {
that.web_url = return_url
// 转发成功
wx.showToast({
title: "转发成功",
icon: 'success',
duration: 2000
fail: function (res) {
// 转发失败
onLoad: function () {
var pages=getCurrentPages();
var currentPage = pages[pages.length - 1];
var web_src = decodeURIComponent(currentPage.options.return_url ||
encodeURIComponent("你的内嵌网页网址"))
this.web_url = web_src
this.setData({
web_src: web_src
}, function () {
写到这里，终于大功告成了。
但是！！！
测试出问题了！！！分享后跳不到想要的页面！！！
找了n小时的bug，也看不出上面代码思路和实现有何问题。由于此项技术也刚发布不久，市面上几乎没有可以参考的文章，只能自己硬着头皮找。
找啊找，终于在今天早上找到了这个坑。
由于内嵌网页是单页面应用，在手机上测试的时候webViewUrl的获取每次都会出现问题，只有换成一般的多页面应用，这个问题才不会发现。
也不知道这是不是个微信的bug，总之需求实现了，还是很开心的。
觉得笔者写得不错，可以点个赞哒！！！
如果此文中有不对的地方，欢迎大家指正交流！！！
本文作者：肖呵呵
原文地址：
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！微信小程序开发之webview组件内网页实现微信原生支付
前言、背景
本人目前的工作岗位是安卓工程师，在这之前对于前端和后台的知识基本是白纸，只是在日常的工作项目中有需要和小伙伴进行对接的时候接触了那么一丢丢，对于前端和后台的一些专业描述和理解有不当之处还请各位指正。
目前部门的主营项目是一个电商项目，在本人入职之前整个项目系统的主营业务流程已经完备，也已经在正式运营，不过因为各种原因平台主要是在PC端和微信公众号进行运营。小程序其实出来的挺早的，但是优先级对于我们目前的规划来说其实还是很低的。直到17年11月的时候小程序推出了**web-view**组件，在当时被誉为移动电商的福音&&&&$$$...此处省略五千字。有了web-view那什么公众号内容、官网、网页有域名的那种直接就可以扔到小程序的webview组件了，极大的减少了开发成本，就是一把梭。。。。关于小程序
小程序的解释什么的不巴拉巴拉，直接上干货开发文档就不做过多解释 关于小程序web-view组件
先奉上传送门
官方解释：web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。**个人类型与海外类型的小程序暂不支持使用**。
web-view组件开放时间并不久，所以目前的还是有很多局限性的。
关于webview配置指向的链接的去小程序后台进行配置就好（不配置webview是访问不了的）必须支持https 如图：
示例代码：
做过微信公众号的童鞋应该都知道，在公众号里商家H5页面内调用JSSDK就可以实现微信支付功能。但是看过webview组件的API的文档的童鞋应该知道：webview 里面的网页（公众号迁移的网页）是调用不了外部的微信支付what.......
虽然微信支付也确实是提供了小程序的微信支付API，但是因为我们整个小程序的内容就是一个webview嵌入公众号内容的网页，在网页内下订单的过程中是无法通过webview的api接口通知小程序调起微信支付的。 查看微信支付小程序的支付文档，我们小程序如果要调用微信支付只需要得到以下参数就可以。
如图：小程序调用微信支付参数
以及示例代码
看到这些一切就明朗了，在小程序端只要能通过某种方式得到webview内网页下单后的生成的相关参数就能调起微信支付从而实现webview组件内网页微信支付。实现方式和主要流程
1. 先说明一下整个小程序实现webview调用支付的代码结构如图：
整个结构很清晰、简单，不做过多解释。微信小程序采用的MVVM的模式。
`xxxx.wxml`类似于安卓activity的xml文件。
`xxxx.js`类似于安卓中MVC模式的控制层。
`xxxx.wxss`类似于前端的CSS样式。我们目前几乎没用到，因为只用到了小程序的webview组件。
2. 原理分析
我们来看一下微信小程序支付的的业务流程：
上面已经提到如果需要小程序的webview组件调起微信支付，需要网页内部统一下单得到支付参数，然后通过小程序API调起微信支付,如下： wx.requestPayment(
'timeStamp': '',
'nonceStr': '',
'package': '',
'signType': 'MD5',
'paySign': '',
'success':function(res){},
'fail':function(res){},
'complete':function(res){}
那么小程序如何得到支付参数呢，查看webview的API文档发现 webview的内部网页可以通过JSSDK的该API 实现webview网页内部控制小程序。
`wx.miniProgram.navigateBack` 进行小程序页面的跳转比如我们的项目在 index.wxml 的 webview 网页内部使用该API就可以控制小程序从index page 跳转到wxpay page。具体实现步骤
1. 在index.wxml文件添加webview组件，用来装载原公众号里面的网页内容
&web-view src="{{url}}"&&/web-view&该url是index.js里面data定义的一个变量``，方便通过index.js的setData方法对webview的网页进行动态加载
2. 新建wxpay目录，并新建wxpay的page页面用来处理支付逻辑。（该页面目前是空白的，功能上分析该页面只是为了收到webview网页的支付参数，从用户使用角度上来说该页面是一个支付页面应该需要添加一些用户交互的，比如转圈QAQ）3. webview网页用户在生成订单后，选择微信支付即走微信的统一下单流程，生成微信支付的参数和sgin。在webview网页内部通过path携带参数跳转到wxpay页面，具体伪代码实现如下(注释很清楚)：
//判断是否是在wx小程序环境
if(small_wx
&& data.resultCode=='success'){
//点击微信支付后，调取统一下单接口生成微信小程序支付需要的支付参数
var params = '?timestamp='+data.jsparams.timeStamp+'&nonceStr='+data.jsparams.nonceStr
+'&'+data.jsparams.pkg+'&signType='+data.jsparams.signType
+'&paySign='+data.jsparams.paySign+'&orderId='+data.orderid+'&pType=0';
//定义path 与小程序的支付页面的路径相对应
var path = '/pages/wxpay/wxpay'+
//通过JSSDK的api使小程序跳转到指定的小程序页面
wx.miniProgram.navigateTo({url: path});
4. 小程序端wxpay页面逻辑实现（wxpay.js）,webview内的网页通过`wx.miniProgram.navigateTo({url: path})`携带参数使小程序跳转到wxpay页面。wxpay.js 对url中携带的参数进行处理，然后通过`wx.requestPayment`调起微信支付并对支付的回调通知进行处理，具体代码实现如下（注释很详细不做过多赘述）：
onLoad: function (options) {
var that =
//页面加载调取微信支付（原则上应该对options的携带的参数进行校验）
that.requestPayment(options);
//根据 obj 的参数请求wx 支付
requestPayment: function (obj) {
//获取options的订单Id
var orderId = obj.orderId;
//调起微信支付
wx.requestPayment({
//相关支付参数
'timeStamp': obj.timestamp,
'nonceStr': obj.nonceStr,
'package': 'prepay_id=' + obj.prepay_id,
'signType': obj.signType,
'paySign': obj.paySign,
//小程序微信支付成功的回调通知
'success': function (res) {
//定义小程序页面集合
var pages = getCurrentPages();
//当前页面 (wxpay page)
var currPage = pages[pages.length - 1];
//上一个页面 （index page）
var prevPage = pages[pages.length - 2];
//通过page.setData方法使index的webview 重新加载url
有点类似于后台刷新页面
//此处有点类似小程序通过加载URL的方式回调通知后端 该订单支付成功。后端逻辑不做赘述。
prevPage.setData({
url: "https://xxxxxxxxxx.com/wx_isPayment.jhtml?orderId=" + orderId
+ '&ispay=0',
//小程序主动返回到上一个页面。即从wxpay page到index page。此时index page的webview已经重新加载了url 了
//微信小程序的page 也有栈的概念navigateBack 相当于页面出栈的操作
wx.navigateBack();
//小程序支付失败的回调通知
'fail': function (res) {
console.log("支付失败"),
console.log(res)
var pages=getCurrentPages();
var currPage = pages[pages.length - 1];
var prevPage = pages[pages.length - 2];
console.log("准备修改数据")
prevPage.setData({
url: "https://xxxxxxxxxx/wx_isPayment.jhtml?orderId=" + orderId + '&ispay=0' ,
console.log("准备结束页面")
wx.navigateBack();
5. 微信支付后的回调通知，当wxpay页面调用`navigateBack`的时候回到index页面的时候webview 已经加载`https://xxxxxxxxxx/wx_isPayment.jhtml?orderId=" + orderId + '&ispay=0' ` 这个网页，后台实现相关逻辑。通过orderId查询该订单是否支付成功。如果支付成功就网页重定向到支付成功的页面，如果支付失败还是待支付页面。用户依旧可以点击微信支付按钮进行微信支付。
6. 至此小程序的webview组件内网页就可以实现微信支付了。see you agin
如果用原生小程序组件实现商城支付就没这么麻烦，但是工作量会非常巨大。直接把公众号的网页移植到小程序的webview里面，极大的节省了开发时间，对于小商户来说还是非常方便的。我们现在也算是偷懒把，毕竟投入不大、优先级不够、先弄个东西出来可以用，小程序没有一个向服务端的`wx.request`请求。但是我内心其实拒绝的。。。。。因为用户体验和产品角度都很low.........
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！