Applet applet jump to official account page

web-view

Base library 1.6.4 Start supporting , Lower version needs to be done Compatible processing .

The container that hosts the web page . Will automatically fill the entire applet page , Personal type applet does not support the use of .

client 6.7.2 Version start ,navigationStyle: custom  Yes  web-view  Invalid component

Cannot use... In applet plug-ins .

attribute	type	The default value is	Required	explain	Minimum version
src	string		no	webview Links to web pages . Open related official account , Other pages need to be logged in Applet management background Configure business domain name .	1.6.4
bindmessage	eventhandler		no	Page to applet postMessage when , At a certain time （ Applet back 、 Component destruction 、 Share ） Trigger and receive a message .e.detail = { data },data Many times postMessage An array of parameters of	1.6.4
bindload	eventhandler		no	This event is triggered when the web page is loaded successfully .e.detail = { src }	1.6.4
binderror	eventhandler		no	This event is triggered when the web page fails to load .e.detail = { src }	1.6.4

---

 1. Add business domain name , Must be https

Put it under the root directory of the server of the domain name Verify File , The verification file can be obtained on wechat public platform

2. Applet authorization

3. Article list page

jumpH5.wxml

<wxs src="../../common/utils.wxs" module="tool" />
<view>
    <view class="title"> Guess you like </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({

  /**
   *  Initial data of the page 
   */
  data: {
    articleList: [],
    params: {
      PageIndex: 1, // Page number 
      PageSize: 10, // Number of data pieces without page 
      Title: '',
      noMore: false, // Whether to continue to request data when pulling , That is, whether there is more data 
    },
  },

  /**
   *  Life cycle function -- Monitor page loading 
   */
  onLoad: function (options) {

  },

  /**
   *  Life cycle function -- Monitor page display 
   */
  onShow: function () {
    this.getList();
  },
  //  get data 
  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
          });
        }
      }
    )
  },
  //  See article details 
  artcileView(event) {
    wx.navigateTo({
      url: '/pages/h5Register/h5Register?path=' + encodeURIComponent(event.currentTarget.dataset.arturl),
    })
  },


  /**
   *  Page related event handler -- Monitor user pull-down action 
   */
  onPullDownRefresh: function () {

  },

  /**
   *  Handling function of page pull bottom event 
   */
  onReachBottom: function () {
    if (this.data.params.noMore) {
      this.getList();
    } else {
      wx.showToast({
        title: ' No more data ',
        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 Specific to see Applet wxs Time format conversion used by the module _ Blogs scattered all over Tianya road -CSDN Blog _wxs String rotation 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. newly build h5 Jump to the middle page

h5Register.wxml

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

h5Register.js

Page({
  /**
   *  Initial data of the page 
   */
  data: {
    pageUrl: ''
  },

  /**
   *  Life cycle function -- Monitor page loading 
   */
  onLoad: function (options) {
    var that = this;
    console.log('options', options)
    var pathD = decodeURIComponent(options.path);
    console.log('pathD', pathD)
    this.setData({
      pageUrl: pathD
    })
  },
})

Result demonstration :