小程序中怎么显示html 内容

最近新做一个功能，需要在小程序中显示文章，那么后台编辑，肯定就会采用富文本编辑器。返回到小程序的将会是html。可以使用两个方法，第一个使用小程序引入web-view页面，这么做会很方便，但是如果文章图片比较多,而且又没有什么规则的话，适配起来就比较蛋疼，后台编辑也比较蛋疼，而且我是一个后端工程师哟，你懂得。所以采用了第二个方法，使用wxParse,那么图片我就可以很方便处理了。还有我小程序使用了wepy框架。

简单说一下wepy

这个自己看一下文档就知道了，我主要是不想写一堆回调，而且它支持async/await,不使用这些话，我估计登录就能让你callback到崩溃，app.wpy几个主要函数：

伪代码哟，你懂得，如果对你有帮助，不要复制粘贴

构造函数方法：

 constructor () {
      super()
      //这两个是引入promise,还有修复微信原生同时发送多个请求可能会出现错误的bug
      this.use('requestfix');
      this.use('promisify'); 

       //全局拦截与后端请求的数据，这也是为什么会在app.wpy我要写一个commentRequest方法的原因
      this.intercept('request', {
        config (p) {
          return p;
        },
        success (response) {

          if (response.data.code == 200) {
            return response.data.data
          }
          if(response.data.code==400){
            wepy.showModal({
              title:'出错了。。',
              content:'请下拉重新加载页面'
            });
            wepy.clearStorageSync();
          }

        },
        fail (response) {
 
          return response;
        }
      });

    }

1. onShow方法中：

  //全局中设置isRefresh为false
 globalData = {
      userInfo: null, //用户信息
      isRefresh:false
    }
    
  //当用户进入小程序的时候，查看是否需要refresh_token,如果能获取到缓存中的reflresh_token,那么重新请求后端，获取access_token和reflresh_token,如果reflesh_token都没有获取到，说明用户登录出现问题了，重新调取login,这里的is_reflesh是结合下文中的commonRequest使用。
 onShow(){
      let refreshToken = wx.getStorageSync('refresh_token');
      console.log('小程序初始化---------------')
       
      if (refreshToken) this.globalData.isRefresh=true;
    }

2.全局请求函数

这个函数的作用是：当你在pages页面和后端交互时，可以全局控制

  async commonRequest (url, data = '', method = 'POST') {

      //结合onshow,如果isRefresh为true,重新请求后端接口获取数据
      if(this.globalData.isRefresh){

        if( ! await this.refreshTokenFunc()){
          return false;
        }
        this.globalData.isRefresh=false;
      }

      let  value = wx.getStorageSync('access_token')

      let params = {
        url: url,

        data: data,

        method: method,

        header: {
          'Authorization': value ? ('Bearer ' + value) : '',
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        }
      }

      return await wepy.request(params);
    }

refleshTokenFunc方法：

   
    async refreshTokenFunc(){

      let refreshToken = wx.getStorageSync('refresh_token')
      let params={
        url:urlList.refreshToken,
        data:{
             refresh_token: refreshToken
        },
        method:"POST"
      }

      return  await wepy.request(params).then(res => {
        console.log('刷新token 中');
        try {
          wepy.setStorageSync('access_token', res.access_token)
          wepy.setStorageSync('refresh_token', res.refresh_token);
          return true;

        } catch (e) {
          return false;
        }

      }).catch(res => {

        return false;
      });
    }

3.login方法：

自己维护用户登录状态：

 async login () {
      try {
        let {code: code} = await wepy.login();

        let {iv: iv, encryptedData: encryptedData, userInfo: userInfo} = await  wepy.getUserInfo({withCredentials: true})

        let loginData = {code: code, iv: iv, encryptedData: encryptedData}


        let params={

          url:urlList.miniLogin, //自己服务器维护用户登录状态地址
          data:loginData,
          method:"POST",
          header: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          }
        }

        return await wepy.request(params).then(res => {
          this.globalData.userInfo = userInfo
          try {

             wepy.setStorageSync('access_token', res.access_token)
            wepy.setStorageSync('refresh_token', res.refresh_token)
            return true;
          } catch (e) {
            return false;
          }
        }).catch(res => {
          console.log('error');
          return false;
        })

      } catch (err) {
        return await this.checkSettingStatus();
      }

    }

4.检查登录状态：

    async checkLoginState () {
      try {

        //微信自己的code 状态
        let wxLoginState = await wepy.checkSession().then(res => {return true}, res => {return false});

        //自己服务器的状态
        let token = wx.getStorageSync('access_token')

        if (!wxLoginState || !token) {

          return await  this.login();
        } else {

          return true;
        }
      } catch (res) {
        console.log('检查登录状态---checkLoginState');
      }

    }

5.判断是否授权：

    async checkSettingStatus () {
      // 判断是否是第一次授权，非第一次授权且授权失败则进行提醒
      try {
        let auth = await wepy.getSetting();

        let authSetting = auth.authSetting;

        if (authSetting['scope.userInfo'] === false) {

          let confirm = await wepy.showModal({
            title: '用户未授权',
            content: '如需正常使用功能，请按确定并在授权管理中选中“用户信息”，然后点按确定。最后再重新进入小程序即可正常使用。',
            showCancel: false,
          });

          if (confirm.confirm) {

            await wepy.openSetting();
            return await this.login();

          } else {
            return false;
          }

        } else {
          return true;
        }

      } catch (res) {

      }

    }

主页面app.wpy就这么多东西，在pages页面中怎么使用呢,比如下面就是你小程序的入口pages文件了，用户访问的时候会首先进入：

    onLoad () {
      this.list();
      wx.showLoading({
        title: '加载中',
        icon:'loading',
        mask:true
      })

    }

    onShareAppMessage(res){
         return {
           title:'xxx服务欢迎您的使用',
           path:'/pages/list'
         }
    }


    onPullDownRefresh () {

      wx.showNavigationBarLoading()
      this.list();
      wx.showToast({
        title:'加载中',
        icon:'loading',
        mask:true
      })
      wx.hideNavigationBarLoading()

      wx.stopPullDownRefresh()
    }

    async list () {
      //检查小程序登录,查看上文中的checkLoginState,如果登录状态失效，那么重新掉起login 方法登录
      await this.$parent.checkLoginState();
        //调用全局的请求函数
       await  this.$parent.commonRequest(url.list).then(res => {
        this.xxx = res;
        this.$apply();
         wx.hideLoading();

      }).catch(err=>{
      
        wepy.showModal({
          title:'走神了。。',
          content:'请下拉重新加载页面'
        })

      wx.clearStorageSync('access_token')
      })

    }

我们来说一下整个访问流程，用户一打开小程序，首先经过app.wpy中的onLauch方法，而我没有写任何东西，那么就会访问onShow方法，在这个函数里，第一次访问肯定没有reflesh_token,所以isRefresh肯定为false,那么接下来进入pages中的首页了，就会进入上面的list函数，就会调用 await this.$parent.checkLoginState(),自然就会调用login了，是不是很机智。

wepy就简单介绍这么点了

引入wxParse

按照官网引入就可以了，但是结合wepy,就会出现问题，那么下面就是解决bug问题：

如果已经安装官网引入了，发现图片不能自适应，或者内容都不能显示，为什么呢，找到wxParse.js文件中wxParse函数，最下面看到：

问题就出在这里，wepy和微信自带的数据绑定有冲突，wxParseImgLoad和wxParseImgTap是自动适应图片和图片加上点击事件的，改成下面：

   that[bindName]=transData

发现图片还是不能使用，那么去掉wxParseImgLoad和wxParseImgTap，把这两个函数放到pages中需要使用wxparse的页面中：

 methods={

      // 图片点击事件
       wxParseImgTap(e) {
         let that = this;
         let nowImgUrl = e.target.dataset.src;
         let tagFrom = e.target.dataset.from;
         if (typeof (tagFrom) != 'undefined' && tagFrom.length > 0) {
           wx.previewImage({
             current: nowImgUrl, // 当前显示图片的http链接
             urls: that.data[tagFrom].imageUrls // 需要预览的图片http链接列表
           })
         }
       },

  /**
   * 图片视觉宽高计算函数区
   **/
   wxParseImgLoad(e) {

  }

修改wxparse.wxml中的img模板，原来是：

<template name="wxParseImg">
  <image class="{{item.classStr}} wxParse-{{item.tag}}" data-from="{{item.from}}" data-src="{{item.attr.src}}" data-idx="{{item.imgIndex}}" src="{{item.attr.src}}" mode="aspectFit" bindload="wxParseImgLoad" bindtap="wxParseImgTap" mode="widthFix" style="width:{{item.width}}px;"-->
  
</template>

改成：

<template name="wxParseImg">

  <image class="{{item.classStr}} wxParse-{{item.tag}}" lazy-load="true" data-from="{{item.from}}" data-src="{{item.attr.src}}" data-idx="{{item.imgIndex}}" src="{{item.attr.src}}" mode="widthFix" bindload="wxParseImgLoad" bindtap="wxParseImgTap"  style="width:100%;"
  
</template>

我这里使用了微信图片image组件自适应的功能，而不用上面那个wxParseImgLoad(e)去动态计算了。现在知道我为什么去掉那个函数了吧

其实就改动了wxparse插件中的wxparse.wxml和wxparse.js两个文件。那么怎么使用呢：

<template>
//-------------------------模板使用-------------------------------
  <import src="../wxParse/wxParse.wxml"/>
      <block>
        <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
      </block>
 
  </view>

</template>

<script>
  import wepy from 'wepy'
  import  url from '../config/url';
 import WxParse from "../wxParse/wxParse";

  export default class newsDetail extends wepy.page {
    data = {
      title:'',
      article_id:'',
      detail:'',
      article:''
    }


    methods={

      // 图片点击事件
       wxParseImgTap(e) {
         let that = this;
         let nowImgUrl = e.target.dataset.src;
         let tagFrom = e.target.dataset.from;
         if (typeof (tagFrom) != 'undefined' && tagFrom.length > 0) {
           wx.previewImage({
             current: nowImgUrl, // 当前显示图片的http链接
             urls: that.data[tagFrom].imageUrls // 需要预览的图片http链接列表
           })
         }
       },


   wxParseImgLoad(e) {

       }
  
    }


    onLoad (options) {
      this.articleDetail();

      let {id:id}=options;
      this.article_id=id;
      wx.showLoading({
        title: '加载中',
        icon:'loading',
        mask:true
      })

    }

 
    async articleDetail () {
      //检查小程序登录登录
      await this.$parent.checkLoginState();

       let urlInfo=url.articleDetaiol
      await  this.$parent.commonRequest(urlInfo).then(res => {
        this.detail = res;
        console.log(this.detail)
        //这里很重要---------------------------------------------------
        WxParse.wxParse('article', 'html', this.detail.content, this,1);
        this.$apply();
        wx.hideLoading();

      }).catch(err=>{
     
        wx.clearStorageSync('access_token')
      })

    }

  }
</script>

至于后台怎么抓取微信文章，把图片上传到七牛，有时间另写吧