记一次从公众号文章跳转小程序页面异常的问题

自小程序的第一个版本上线快一个月了，从微信搜索使用一直没什么问题，所以以为挺稳定了，没想到昨晚我们的运营在推文中加余圆上了小程序的链接，想从推文直接跳转至小程序首页的时候，却发现跳过去了之后页面加载异常了，表现为一片空白，死活都加载不出来数据。

由于推文中配的小程序链接只能跳转线上的小程序，并不能配置体验版本的小程序，所以只能靠推理解决这个bug。

接下来我开始了修复之旅...

首先我看了一下相关的函数，写得很简单

从入口函数来看，分了三种情况：

1：从城市列表跳转过来的时候会携带一些参数，例如城市id等。这种情况会先进入initData() 函数进行一些初始化。

2：如果页面有缓存数据，也会先进入initData() 函数。

3：如果是从微信直接进入小程序，并且没有过缓存，我把这种情况当作最初始的一种情况，这时候就正常地走获取数据流程，即直接调用getData() 函数获取数据。

1、首先根据页面加载的时候没有出现源毁脊loading，那么程序并没有执行 getData() 函数。所以肯定不是一开始就执行 this.getData()。

2、清除缓存，移除小程序，再次进入小程序，仍然出现一片空白，那么知道并不是因为缓存问题，所以也排除第二种情况。

3、至于第一种情况，我是比较认同的。因为当初我只是想到从微信直接打开小程序的场景，却忽略了从公众号推文（甚至别的渠道）进入的场景。据我之前开发公众号的经验推测，从推文进入的时候微信极大可能会在url上携带一些乱七八糟的参数，这些参数正符合第一种情况的条件，进而进入了this.initData(options)。

4、来看data.flag 的值，如果等于0，那么调用this.getData()，已知this.getData()并没有被执行，所以data.flag 不等于0；如果 this.showFail = true 的话，那么会显示一个失败页，但页面是空白的，并没出现失败页，由此可知data.flag 并不等于1 或者 2。接下来没有路可走了，所以会出现空白页，这就说得过去了。

5、之所以会进入initData()函数，上面提过是别的微信自动加入的参数导致的，这些参数并不是我需要的（比如很关键的一个参数flag），但是却阴差阳错地成为了进入initData()函数的充分条件，此时flag 应该是undefined。所以形式就很明朗了，只要把进入的条件写得严谨一些如：

尽量从源头制止，并把initData函数改造如下，保证有一条通路可走：

到这里，我觉得应该是没问题的了。然后提交审核啦，审核很快就通过了，然后把小程序发布上去，然后开始验证，再次从当初那篇推文进入小程序...发现Ok啦，出雹渗来数据啦

哈哈 谨记录一下这个坑！

首先确认是否有相应的接口权限，这里主要用到获取素材相关的接口，可以看到对应接口文档，个人号还是有对应权限的。

在新增了永久素材后，开发者可以分类型获取永久素材的列表：

1、获取永久素材的列表，也包含租厅迹公众号在公众平台官网素材管理模块中新建的图文消息、语音、视伏芹频等素材 。

2、临时素材无法通过本接口获取。

3、调用该接口需https协议。

实现的逻辑还是比较简单的，具体分两个步骤：

1、获取公众号的access_token

获取公众号的access_token的在前文中已经实现。

基于微信小程序云函数的方式获取微信公众号access_token -

2、遍历调用公众号永久素材列表接口获取数据

调用素材列表接口，获取相应的文章信息，这里主要获取公众号的图文信息(type为news)，接口调用请求说明：

http请求方式: POST

https://api.weixin.qq.com/cgi-bin/material/batchget_material?access_token=ACCESS_TOKEN

调取素材列表之后在小程序中通过视图组件scroll-view来实现，主要有标题、封面图、摘要：

<scroll-view class="container"scroll-y='true' style="height:{{height}}px" bindscrolltolower='lower'>

<block wx:for="{{res}}" >

<view class='feed-item' id='{{item.title}}' bindtap='getDetial'>

<view>

<text >{{item.title}}</text>

</view>

<view style='text-align: center'>

<image src='{{item.image_url}}'>tupian </image>

</view>

<view>

<text >{{item.digest}}</text>

</view>

</view>

</block>

</scroll-view>

文章列表在弊并页面首次加载时就获取：

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

wx.getSystemInfo({

success: (res) =>{

this.setData({

height: res.windowHeight

})

}

})

this.getData()

}

函数getData()实现步骤，具体请求函数用云函数来实现，先从调取acces_token：

// 云函数入口文件

const cloud = require('wx-server-sdk')

const news = require('New')

cloud.init()

// 云函数入口函数

exports.main = async (event, context) =>{

let token = null

await cloud.callFunction({

name:'token'

}).then(function(data){

token = data.result

})

let offset = event.offset

let count = event.count

let nw = new news(token)

let rst = nw.getWechatPosts(offset,count)

return rst

}

然后调取文章列表信息，每次获取10条信息：

//获取文章列表

getData(){

var that = this

let pgno = this.data.pageNo+1

let result = this.data.res

wx.cloud.callFunction({

name:'news',

data:{

offset:this.data.offset,

count:this.data.count

},

success:function(res){

var resArr = []

let body = res.result.body

let total_count = body.total_count//总共图文数量

let item_count = body.item_count//本次调用数量

let item = body.item

let page_total = parseInt((total_count + that.data.count - 1) / that.data.count)

let mud = total_count % that.data.count

const db = wx.cloud.database()

for (let i = 0i <item.lengthi++) {

let news_item = item[i].content.news_item

//单图文消息及多图文消息

for (let j = 0j <news_item.lengthj++) {

let title = news_item[j].title//标题

let url = news_item[j].url//详细地址

let image_url = news_item[j].thumb_url//封面图片地址

let digest = news_item[j].digest//摘要

let author = news_item[j].author//作者

let content = news_item[j].content

resArr.push(new nw(total_count, item_count, title, url, image_url, digest, author, content))

let res_id = null

db.collection('content').where({

_id: url

}).get({

success: function (res) {

res_id = res.data[0]._id

}

})

if (res_id === url){

}else{

db.collection('content').add({

data: {

_id: url,

content: content,

title: title

},

success: function (res) {

}

})

}

}

that.setData({

res: result.concat(resArr),

page_total: page_total,

pageNo: pgno,

mud: mud

})

}

}

})

}

scroll-view组件到底触发事件实现函数：

lower() {

//总页数18/10=1

var pageno = this.data.pageNo

var page = this.data.page_total

console.log("总页数：" + page+",第"+pageno+"页"+"zuohouy:"+this.data.mud)

if (pageno >page) {//page 4

wx.showToast({ //如果全部加载完成了也d一个框

title: '我也是有底线的',

icon: 'success',

duration: 300

})

return false

} else {

wx.showLoading({ //期间为了显示效果可以添加一个过度的d出框提示“加载中”

title: '加载中',

icon: 'loading',

})

let offset = this.data.offset

let count = this.data.count

offset = this.data.offset + this.data.count

console.log("offset:" + offset+"count:"+count)

this.setData({

offset: offset,

count: count

})

setTimeout(() =>{

this.getData()

wx.hideLoading()

}, 1500)

}

}

放在onReady和森答onShow都不行，此纳慧我茄迟是在onLoad里调用后台数据

onLoad(){

this.getData

},

getData( id ) {

//wx.request

.then(data =>{

this.setData({ item: data})

this.queryMultipleNodes()

})

}

---