web-view

基础库 1.6.4 开始支持，低版本需做兼容处理。

承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。

客户端 6.7.2 版本开始，navigationStyle: custom 对 web-view 组件无效

小程序插件中不能使用。

属性	类型	默认值	必填	说明	最低版本
src	string		否	webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。	1.6.4
bindmessage	eventhandler		否	网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }，data是多次 postMessage 的参数组成的数组	1.6.4
bindload	eventhandler		否	网页加载成功时候触发此事件。e.detail = { src }	1.6.4
binderror	eventhandler		否	网页加载失败的时候触发此事件。e.detail = { src }	1.6.4

---

 1.添加业务域名,必须是https

在该域名的服务器的根目录下放校验文件,校验文件可在微信公共平台获取到

2.小程序授权

3.文章列表页面

jumpH5.wxml

<wxs src="../../common/utils.wxs" module="tool" />
<view><view class="title">猜你喜欢</view><view class="list"><view class="cont" wx:for="{{articleList}}" wx:for-index="idx" wx:for-item="item" wx:key="idx" bindtap="artcileView" data-artUrl="{{item.url}}"><image src="{{tool.imgPath(item.img)}}" class="cont-img" /><view class="cont-div"><view class="cont-top"><view class="cont-tit">{{item.title}}</view></view><view class="cont-time">{{tool.ToDate(item.created)}}</view></view></view></view>
</view>

jumpH5.js

const app = getApp();
Page({/*** 页面的初始数据*/data: {articleList: [],params: {PageIndex: 1, //页码PageSize: 10, //没页数据条数Title: '',noMore: false, //上拉时是否继续请求数据，即是否还有更多数据},},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面显示*/onShow: function () {this.getList();},// 获取数据getList() {var that = this;app.fetch('/mobile/Article/List', this.data.params).then(ret => {if (ret.status) {var artItem = that.data.articleList;if (ret.data.list.length > 0) {if (that.data.params.PageIndex == 1) {artItem = []}var artlist = ret.data.list;if (artlist.length < that.data.params.PageSize) {var ark = this.data.params;ark.noMore = false;that.setData({articleList: artItem.concat(artlist),params: ark})} else {var ark1 = this.data.params;ark1.PageIndex = ark1.PageIndex + 1;ark1.noMore = true;that.setData({articleList: artItem.concat(artlist),params: ark1})}}} else {wx.showModal({showCancel: false,content: ret.errmsg});}})},// 查看文章详情artcileView(event) {wx.navigateTo({url: '/pages/h5Register/h5Register?path=' + encodeURIComponent(event.currentTarget.dataset.arturl),})},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {if (this.data.params.noMore) {this.getList();} else {wx.showToast({title: '没有更多数据',icon: 'none',duration: 1500})}}
})

jumpH5.css 

.title {margin: 30rpx;font-size: 32rpx;color: #2d73af;
}
.list .cont {box-sizing: border-box;padding: 20rpx;margin-bottom: 30rpx;margin: 30rpx;border-radius: 10rpx;display: flex;align-items: center;
}
.list .cont .cont-img {width: 140rpx;height: 140rpx;border-radius: 8rpx;border: 2rpx solid #e8e6e6;
}
.list .cont .cont-div {flex-grow: 1;flex: 1;margin-left: 20rpx;display: flex;flex-direction: column;justify-content: space-between;font-size: 28rpx;
}
.list .cont .cont-div .cont-top {height: 120rpx;
}
.list .cont .cont-div .cont-top .cont-tit {line-height: 1.3;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
}
.list .cont .cont-div .cont-time {flex-grow: 1;height: 24rpx;font-size: 24rpx;color: gray;text-align: right;
}

utils.wxs 具体查看小程序的wxs模块使用之时间格式转换_散尽天涯路的博客-CSDN博客_wxs 字符串转date

function ToDate(jsondate) {jsondate = jsondate.replace("/Date(", "").replace(")/", "");if (jsondate.indexOf("+") > 0) {jsondate = jsondate.substring(0, jsondate.indexOf("+"));} else if (jsondate.indexOf("-") > 0) {jsondate = jsondate.substring(0, jsondate.indexOf("-"));}var date = getDate(parseInt(jsondate, 10));var Y = date.getFullYear() + '-';var M = formatNumber(date.getMonth() + 1) + '-';var D = formatNumber(date.getDate()) + ' ';var h = formatNumber(date.getHours()) + ':';var m = formatNumber(date.getMinutes()) + ':';var s = formatNumber(date.getSeconds());return Y + M + D + h + m + s; s
}
var formatNumber = function (n) {return n >= 10 ? n : '0' + n
}function imgPath(val){return val.replace(getRegExp('\\','g'),"/");
}module.exports = {ToDate: ToDate,imgPath:imgPath
}

 4.新建h5跳转中间页面

h5Register.wxml

<web-view src="{{pageUrl}}"></web-view> 

h5Register.js

Page({/*** 页面的初始数据*/data: {pageUrl: ''},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this;console.log('options', options)var pathD = decodeURIComponent(options.path);console.log('pathD', pathD)this.setData({pageUrl: pathD})},
})

结果演示: