小程序 小程序跳转公众号页面

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
    })
  },
})

结果演示: