小程序内嵌webView开发。这边记录一下小程序最基本的功能点:webView和原生之间通信、转发功能 和 canvas图文分享功能可以点击查看功能开发；下面直接看

自己无聊倒腾的小程序欢迎测试~圣诞节的小程序

官方文档的入口：web-view文档 ##1.web-view基本描述 web-view 组件是小程序自身提供的，提供的API较少。提供了一下4个API 不过我只用了前2个。

src: 加载页面的URL ( tips:这边需要是https类型的,开发的时候无所谓。微信开发者工具-设置-项目设置-选中下面选项)

bindMessage:这个就可以拿到webview页面发给小程序的消息。不过是在分享、销毁时候才能拿得到~

小程序wxml代码

//index.wxml
<web-view src="{{web_src}}"> </web-view>

小程序js代码

//index.js
Page({
  data: {
    web_src: "https://www.baidu.com", //webview内嵌的url
  }
})

可以啦。小程序是不是已经跑起来了~
##2.web-view与原生交互 webview想和小程序原生通信只能通过 wx.miniProgram.postMessage这个API 。只能页面往原生发送消息。页面需要引入微信JS-SDK1.3.2 自行下载使用如下

<!-- html -->
<script
  type="text/javascript"
  src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"
></script>
<script>
  //跳转到原生的页面,如果跳转的页面时tabbar的页面则无效。需要用下方的跳转方式
  wx.miniProgram.navigateTo('pages/index/index');
  //跳转到对应的tabbar的页面
  wx.miniProgram.switchTab('pages/index/index');
  //判断当前是否是小程序页面
  wx.miniProgram.getEnv(function(res) {
    console.log(res.miniprogram) // true
 })
  //页面向小程序发送消息
  wx.miniProgram.postMessage({ data:{foo: 'bar'} })
</script>

React开发的话也可以直接引入该JS，就可以直接使用，或者使用npm包的方式。需要在pageage.json引入

 //package.json
  "weixin-js-sdk": "^1.3.2",

  //需要使用的页面import进来
   import wx from 'weixin-js-sdk';
    //发送消息等
   wx.miniProgram.postMessage({ data:{foo: 'bar'} })

这边需要注意的的是使用wx.miniProgram.postMessage({ data:{foo: 'bar'} }) 括号里面的数据必须是以 data: {xxx:xx} key必须是data字段否则没有值。

##3.小程序原生如何处理postMessage传值 webView通过postMessage传来值。我们只能在组件销毁、分享、后退才能进行处理。我们以触发分享为例:

  //index.js
 /**
  * 拿到H5发生给小程序的消息
  *  res格式 [{xx:xx},{xx,xx}]
  */
  msgHandler: function (res) {
    //这边的res.detail.data是一个数组.存贮这每一次webview触发postMessage的值
    let data = res.detail.data; 
    //如果获取最新的postMessage的值,取数组最后一个就可以了
    let lastData = res.detail.data[res.detail.data.length - 1];
    console.log("取到传过来的值,处理业务啦~")
  },

//index.wxml
<web-view src="{{web_src}}" bindmessage="msgHandler" > </web-view>

##4.转发功能转发功能是小程序最基本的功能。需要在我们的我们的页面中加入onShareAppMessage 上代码：

  //pages/index/index.js
  onShareAppMessage: function (options) {
    //1.option.webViewUrl 这边拿到的就是当前展示webview的url链接
    //2.为了防止链接有中文,倒是IOS打不开使用encodeURIComponent进行转码
    let return_url = encodeURIComponent(options.webViewUrl);
    //这边作为分享打开的页面
    var path = "pages/sharepage/sharepage?shareUrl=" + return_url;
    return {
      title: title, //标题 如果不配置则不显示 
      path: path,//分享打开的路径
      imageUrl: imgUrl,//分享的图片，如果不配置就截图 微信的机制
      success: function (res) {
        console.log("分享成功啦")
      }
    }
  }

这边就是分享的页面。还有分享给别人。别人打开的页面也需要进行处理一下。添加sharePage文件

//sharePage.wxml
<web-view src="{{share_src}}"></web-view>

//sharePage.js
//该页面用于存放分享后的内嵌网页
Page({
  data: {
    share_src: ''
  },
  onLoad: function (options) {    
    //这边可以取到转发后需要打开的url
    if(options&& options.shareUrl){
      //因为转发前我们对url进行了转码。这边我们用decodeURIComponent进行次转码
      this.setData({
        share_src: decodeURIComponent(options.shareUrl),
      })
    }
  }
})

功能记录到这边，主要是针对 webview的传值和分享转发功能的开发。希望帮助到有需要的小伙伴。canvas图文分享功能在其他文章查看。canvas图文分享功能溜了溜了~