小程序有了Webview，你还需要开发官网小程序吗？小程序有了Webview，你还需要开发官网小程序吗？创赢中国网百家号今天刚刚给客户做完案子，正准备去睡觉。日 11:29 看到了微信公众平台推送的小程序新动态，作为靠小程序吃饭的公司一员，马上就滚去看了。然后明白了什么叫“篇幅短不嫌事大”型官方推送！小程序支持内嵌网页了，也就是我们熟知的webview组件开放了！什么是webview？那就让本本以最通俗易懂的语言为你解读一下吧：你的网页，html写的网页，官网，网站，运行在浏览器上的，有域名的那种，可以内嵌到小程序里了！那么这意味着什么呢？又回到了我们的标题：有了webview，你还需要开发独立开发官网小程序吗？怀着激动心情的本本，在第一时间打开了本际科技小程序的后台，为大家送上第一波操作：首先根据了官方的使用指引——1. 开发者登录小程序后台mp.weixin.qq.com，选择设置-开发设置-业务域名，新增配置域名模块。目前小程序内嵌网页能力暂不开放给个人类型帐号和海外类型帐号。2.每次配置均需管理员扫码验证身份。3.配置业务域名时需要严格按照提示要求配置。限制说明1）每个小程序帐号仅支持配置最多20个域名；2）每个域名仅支持绑定最多20个小程序；3）每个小程序一年内最多支持修改域名50次；4）公众平台后台域名配置成功后，才可使用web-view组件。需要注意的是，你所添加的业务域名必须是HTTPS加密的，也就是申请过SSL证书的。还好本本习惯好，官网的全站https以及cdn加速已经恭候本功能多时了！那么，绑定好域名就厉害了！你只需要在 微信开发者工具 创建一个项目，不用有任何内容，直接勾选创建QuickStart项目就可以进入之后，随便找到一个wxml页面，在里面加入一行神奇的代码然后 和本际科技官网一毛一样的小程序就诞生啦！做到这里，本本只想说一句，厉害了！那么，微信小程序出现webview组件的意义在于哪里呢？相信在开发IOS Android APP的大家应该都听说过原生APP和封装APP的区别吧。那么未来原生小程序和封装小程序会在市场上出现吗？在APP方便，很多开发者拿来比较，都会说封装的没有原生的用户体验好。可是刚才本本用刚测试的开发版拿在手机里玩了玩，感觉真的是如丝般顺滑啊！难道是本际的官网做的太好，还是俺的水果手机比较流畅....明天太阳升起，不知微信小程序的市场会如何动荡，本本和各位一起拭目以待了本文由百家号作者上传并发布，百家号仅提供信息发布平台。文章仅代表作者个人观点，不代表百度立场。未经作者许可，不得转载。创赢中国网百家号最近更新：简介:解读互联网创业新概念作者最新文章相关文章小程序web-view高级使用方法，微信web-view实现微信支付
[问题点数：0分]
本版专家分：1
结帖率 0.38%
CSDN今日推荐
匿名用户不能发表回复！|
CSDN今日推荐小程序webview支付 - 简书
小程序webview支付
我们项目已在公众号上线，目前开发小程序，目标是直接采用webview，不需要再开发一次，但是小程序的webview不支持微信支付，只能通过跳回小程序调用小程序支付的API,我写了demo。
具体项目结构如下：
项目结构.png
1.首先在vue项目(其他用jQuery也类似)引入jssdk,这样可以调用wx.miniProgram的相关接口
&script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.3.2.js"&&/script&
说明一下，src中不引用http域名是我们项目环境有http和https两种方式，这样写可以根据服务器域名动态更改
相关官网文档说明:
webview接口.png
2.小程序加入webview组件，调用接口跳转到相关webview
//事件处理函数
toWebview:function(){
wx.navigateTo({
url: '/pages/webview/webview',
3.webview处理完相关业务逻辑，需要跳回小程序，携带后台返回的支付必要的参数
//小程序和公众号跳转不同页面
navigateToPay: function() {
if (this.isMiniProgram === true) {
// alert('小程序')
//由后台协商好返回的数据格式，该代码仅供参考，不能实际使用
payParam = {
appId: "wxd678efh567hg6787",
nonceStr: "5K8264ILTKCH16CQ2502SI8ZNMTM67VS",
package: "prepay_id=wx2291fcfe0db",
signType: "MD5",
timeStamp: "",
paySign:"BB2B9BD3F2F8A1CB270C6ACE3D7BDB9"
// alert(payParam);
this.navigateToMiniProgram(JSON.stringify(payParam));
alert('公众号');
//原先支付逻辑不用修改;
4.调用小程序的wx.requestPayment唤起支付，如果不需要显示页面可以写个空白页面
5.支付完成，处理相关逻辑。
具体demo点
前言、背景 本人目前的工作岗位是安卓工程师，在这之前对于前端和后台的知识基本是白纸，只是在日常的工作项目中有需要和小伙伴进行对接的时候接触了那么一丢丢，对于前端和后台的一些专业描述和理解有不当之处还请各位指正。 目前部门的主营项目是一个电商项目，在本人入职之前整个项目系统的...
转载链接 注：本文转载知乎上的回答 作者：初雪 链接：https://www.zhihu.com/question//answer/ 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 微信小程序正式公测，张小...
注：本文转载知乎上的回答 作者：初雪跑狗图 链接：https://www.zhihu.com/question//answer/ 来源：知乎六合 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 微信小程序正式公测，张小...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
我们可以幻想出那些大牛面对问题时是如何冷静思考分析的，是如何全面看待一项事物，是如何有着全局观。那些成功人士各有各的特质，但我知道一定有通性。例如坚持，激情，创造力，乐观，等等。 那么问题是，他们突然就有那样的品质的嘛？当然不是，从小培养的。不要想着一夜暴富，不要想着某天醒...
我跑了你不再追了 而是觉得幼稚了 我生气你不再哄了 而是觉得我烦了 我大笑你不觉得我是傻傻的 而是真傻的 有一天 我吼你你不害怕了 而是觉得我讨厌了 和你争论你不屑于答复我 强求来的回复 对对对，你都对 是是是，我都错 有一天 突然觉得你是那么陌生 就像一切都没发生过 一切...
国内越来越多的互联网从业者在宣称自己要构建生态系统。BTA就不说了，连新近火热的小米和乐视也在凑热闹。问题是，生态系统不是生物界才有的吗？那信息行业这样宣称合适吗？ 我们知道，人类所传递、消费的信息，是经过编码的。这已经符合生命的特征：有秩序的信息（参见前文《再论文化》）。...
1.什么 是Markdown Markdown专为文字创作者写作时的语法，码字专用。Markdown简称MD，以下就以 妈的 来注称，是一种写作语言，类似HTML标记，也称作标记语言，听说他是轻量级，跨平台，易学习，这个好喜欢！听起来的感觉就像Python： 人生苦短，我用...
在这种严密的治疗原则下，有了湿热毒也不用担心，可怕的是，很多人长期被热毒困扰而浑然不觉，所以自测下是否有湿热毒非常必要： 湿： ? 大便不成形，舌苔白厚。 ? 食欲不好，容易反胃、恶心，消化不良。 ? 常常觉得呼吸费力，胸闷！ ? 常感心烦意乱。睡眠质量不好，稍有动静就会醒...一个热爱编程的草根程序员
WebView调用微信H5支付
好长时间没有写博客了，感觉自己颓废了不少，这也取决于移动端逐渐趋于稳定的原因，随着自己公司业务的不断扩大，还是会遇到种种问题，最近手上一个需要是app内H5进行微信支付，所以就着手搞一搞。一、微信之前是不支持外部H5使用微信支付的，那个时候我提出了一个解决方案，就是通过webview和js交互拿到统一下单的返回参数，使用微信SDK进行支付，达到了外部浏览器或者app也能调起微信支付，可能是因为小程序出现的原因吧，现在微信支付已经开放出了H5支付的场景，但是微信的目的是在浏览器中直接进行微信支付，所以手机浏览器对微信H5支付支持的是很好的，但是他的文档说不建议在app中使用，有可能是会涉及到支付安全方面的问题吧，但是不建议不代表着不能做，那咱们就来试一下吧。二、支付流程对于微信支付，其实移动端不需要做的太多，只是单纯的用webview直接加载给定的url即可，需要调用微信支付的时候处理一下。下面看代码：public class MainActivity extends AppCompatActivity {
//h5的url链接（替换成正式的url）
private String url = "http://xxx.com/toHuaFeiH5.do?type=huafei";
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView webView = ((WebView) findViewById(R.id.webview));
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl(url);
webView.setWebViewClient(new MyWebviewClient());
* 重写WebViewClient
private class MyWebviewClient extends WebViewClient {
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
}运行结果：什么鬼！参数错误！怎么可能！明明在浏览器上运行的灰常的完美，但是为什么在app上不行呢？其实我心里已经找到了解决方案了，就是在文档上，因为我知道如果微信的东西拿过来就能用，那他就不是微信了，自古微信的文档坑害了多少的有为青年。仔细看微信开发文档，发现微信写出了几种错误的情况，，其中有一种情况就是我们所遇到的情况不清楚referer的，请自行百度，知道了哪里的问题就修改一下吧，贴代码：public class MainActivity extends AppCompatActivity {
//h5的url链接（替换成正式的url）
private String url = "http://xxx.com/toHuaFeiH5.do?type=huafei";
//定义支付域名（替换成公司申请H5的域名即可）
private String realm = "http://xxx.com";
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView webView = ((WebView) findViewById(R.id.webview));
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl(url);
webView.setWebViewClient(new MyWebviewClient());
* 重写WebViewClient
private class MyWebviewClient extends WebViewClient {
public boolean shouldOverrideUrlLoading(WebView view, String url) {
//微信H5支付核心代码
if (url.startsWith("weixin://wap/pay?")) {
Intent intent = new Intent();
intent.setAction(Intent.ACTION_VIEW);
intent.setData(Uri.parse(url));
startActivity(intent);
Map&String, String& extraHeaders = new HashMap&&();
extraHeaders.put("Referer", realm);
view.loadUrl(url, extraHeaders);
//处理https请求
public void onReceivedSslError(WebView view, SslErrorHandler handler, android.net.http.SslError error) {
handler.proceed();
}再来看结果：这样，微信H5是可以正常的走支付的流程了三、支付回调至于回调的问题可根据文档设置，最简单不过，文档原文： 正常流程用户支付完成后会返回至发起支付的页面，如需返回至指定页面，则可以在MWEB_URL后拼接上redirect_url参数，来指定回调页面。如，您希望用户支付完成后跳转至https://www.wechatpay.com.cn，则可以做如下处理：
假设您通过统一下单接口获到的MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx38f&package= 则拼接后的地址为MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx38f&package=&redirect_url=https%3A%2F%2Fwww.wechatpay.com.cn注意：
1.需对redirect_url进行urlencode处理
2.由于设置redirect_url后,回跳指定页面的操作可能发生在：
（1）微信支付中间页调起微信收银台后超过5秒
（2）用户点击“取消支付“或支付完成后点“完成”按钮。因此无法保证页面回跳时，支付流程已结束，所以商户设置的redirect_url地址不能自动执行查单操作，应让用户去点击按钮触发查单操作。到此你就可以轻松玩转app内调用微信H5支付了。本人职场小白，如有说的不对的地方，希望大神能指正出来，大家共同学习！
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！【已解决】小程序webview使用h5微信支付功能
查看: 1181|
评论: 0|原作者: 风之影|来自: 微信公众平台
摘要: 【已解决】小程序webview使用h5微信支付功能
目前京东中可以实现webview调用H5的微信的支付功能*小程序webview使用h5页面调用微信支付功能是否开放*如果开放的话什么时候开放本文来自，转载请保留。网友回复：黄***：目前暂未有计划，若有开放我们会第一时间发公告周知K***：你好 你用webview的支付 改成小程序支付了吗？ 有没有出现开发版支付好用，正式版不好用的问题？W***：小程序原生页支付没有出现问题
上一篇：下一篇：
最新小程序开发问答
最新小程序开发帖子
热门小程序源码
热门小程序开发教程
来了这么久，进去看看吧
Powered by Discuz! X3.2}