桔子桑Blog（小程序）V 0.4

这两天对这个个人博客小程序的UI又作了一些补充，目前看来，小程序的主要功能如下：

1.博客/日常栏目的导航切换

为了避免两个模块的UI上的过于单一，我将两个模块的列表页作了区分：

边距是自适应的（针对不同机型），通过js控制，部分js如下：

首先来看看获取手机导航高度以及宽度数据的API应用：

//获取手机信息设定导航高度以及其他，位于app.js内，vm是this
    wx.getSystemInfo({
      success: function (res) {
        console.log(res);
        let totalTopHeight = 68
        if (res.model.indexOf('iPhone X') !== -1) {
          totalTopHeight = 88
        } else if (res.model.indexOf('iPhone') !== -1) {
          totalTopHeight = 64
        }
        vm.globalData.windowWidth = res.windowWidth
        vm.globalData.statusBarHeight = res.statusBarHeight
        vm.globalData.titleBarHeight = totalTopHeight - res.statusBarHeight
        vm.globalData.navReturnTop = (totalTopHeight - res.statusBarHeight - 26) / 2 + res.statusBarHeight
      },
      failure() {
        vm.globalData.statusBarHeight = 0
        vm.globalData.titleBarHeight = 0
      }
    });

上面的方法存储不同机型下的导航栏高度、屏幕宽度、标题高度到全局变量。

//统一函数，同步硬件信息的处理到其他页面，a位于pp.js内
  setTitleHeight: function (page,callback) {
    page.setData({
      statusBarHeight: getApp().globalData.statusBarHeight,
      titleBarHeight: getApp().globalData.titleBarHeight,
      navReturnTop: getApp().globalData.navReturnTop,
      windowWidth: getApp().globalData.windowWidth
    });
    var timer = setInterval(function(){
      if (page.data.windowWidth && callback) {
        callback();
        clearInterval(timer);
      }
    },50)
  },

这段js是供页面调用的统一函数，将之前存储的相关数据赋值到页面变量；后来根据需要将手机屏幕宽度数据（便

于列表页测算margin值）也加入这个函数中，后来为了处理margin值赋值时候的setData异步导致赋值的时候

windowWidth为空的问题，将这个函数追加了一个callback回调。

下面看看，页面的调用：

不需要像列表页那样设置margin值得话，直接执行就ok了。

const app = getApp();
Page({
　　onLoad:function(){
　　　　app.setTitleHeight(this);
　　}
})

如果需要在获取全局变量并赋值之后，根据获得数据继续进行其他操作，就用到回调callback了（处理setData异步带

来的问题）

const app = getApp();
Page({
　　onLoad:function(){
　　　　app.setTitleHeight(this, function () {
              that.setData({
                itemMargin: 10,
                itemW_H: (that.data.windowWidth - 40) / 3
              })
      });
　　}
})

接下来，就要用到这个itemMargin和itemW_H来设置列表页的布局了，上一段行间样式体会一下：

style="margin:{{itemMargin*4/3}}px 0 0 {{itemMargin*4/3}}px;
width:{{itemW_H*1.5}}px;
height:{{(itemW_H*1.5+itemMargin)*0.618}}px;
border-radius:20rpx;"

2.栏目高亮的问题，以及其他相应数据

这一块栏目view，绑定了单击事件，并用到了data属性来传值：

<view  wx:for-items="{{nav_list}}"  class="page-list {{curidx==index?'active':''}}">
     <text class="li" bindtap="open_list" data-idx="{{index}}" data-cid="{{item.catid}}">
　　　　　　{{item.catname}}
　　　</text>
</view>

单击事件里通过 e.target.dataset.idx 获取data属性相应的值进而对页面数据进行进一步处理来改变

数据的展现以及样式的改变。

3.背景图片的自动替换

这里的自动替换目前是，每次打开小程序展现的背景都是随机的（目前是以10张图片作为数据源，来随机调取）

设置这个背景图片的代码片段放到了一个模板文件中,然后每个页面开头都调用这个模板：

//bgimg.wxml
<template name="bgimg">
　　　　<view class="page_bg" style="background:url({{bgimg}});
　　　　background-size: cover;
　　　　width:100%;
　　　　height:100%;
　　　　position:fixed;
　　　　z-index:-2;
　　　　background-position:center;"></view>
</template>

这里样式写在行间是有原因的，首先，background属性写在行间并用变量赋值，用于后续的动态改变背景图片；

其他属性写在行间是因为，写在wxss里面的话，有的样式会和写在行间存在不同，这个应该涉及到css样式优先

级的问题，这里不做深究（可用！important或者选择器的特殊性值来处理）。

这个模板是放到每个页面的，z-index：-2；保证这个view绝对处于最下层！接下来就是变量bgimg的赋值问题了。

①后台接口

public function getBgimg(){
    $data = array("图片的base64","图片的base64","图片的base64");
　　 $key = array_rand($data);
    exit(json_encode($data[$key]));
}

注意，这里我用了图片的base64作为路径值，后来试验了一下这块用URL地址也是可以的，但是又细想了一下，

还是base64稳妥，URL会出现失效的问题，有的网站维护人员会不定期将服务器资源设权限，然后你再请求这张图

片的时候就是403了，并且小程序中的业务域名限制等等（src属性的值貌似不受该限制？）这里就不作深究了。

②小程序请求接口存图片地址

//接口获取背景毛玻璃图片地址，函数位于app.js
  getBgimg:function(){
    this.request({
      url: this.globalData.server.buz_base + this.globalData.server.buz_path.getBgimg,
      data: {},
      success: function (res) {
        getApp().globalData.bgimg = res.data;
      }
    })
  },

这里的request方法是自己封装的，类似于$.ajax({...})；拿到数据之后，立马存到全局变量。

③每个页面获取全局变量并赋值到页面变量的方法

//设置毛玻璃背景图片地址变量bgimg到页面，位于app.js里
  setBgimg:function(page){
    var timer = setInterval(function(){
      if (!getApp().globalData.bgimg) {
        getApp().getBgimg();
      } else {
        page.setData({
          bgimg: getApp().globalData.bgimg
        })
        clearInterval(timer);
      }
    },1000);
  },

这个方法很简单，设定一个定时函数，如果全局变量bgimg不存在，就执行刚才的的请求，去接口拿数据，否则就将

全局变量赋值到页面变量，然后清除该计时器。

④页面获取背景图片地址

const app = getApp();
Page({
　　onLoad:function(){
　　　　app.setBgimg(this);
　　}
})

4.博客的迁移问题

由于博客是用富文本编辑器写的，那么这些html标签要怎么输出到小程序view中去呢？

有个开源项目叫WxParse（可以百度），这个开源项目比较完整地将富文本编辑器写的内容输出到了小程序的

view标签内，原理是根据html标签的样式在view标签中输出带有特定类名的view标签。

这里为什么说是比较完整呢，因为有的html标签是没有良好地处理的，比如下面的：

你现在看到的这一块内容

用WxParse输出到小程序中去的话

全部变成一行了，超出屏幕宽度还能滑动

虽然如此，但是WxParse还是极大地方便了富文本在小程序中的输出（我刚开始想到这个富文本输出的问题

的时候，还准备自己去写js解析，后来一查，已经有WxParse这个项目了，哈哈哈）

5.结语

可能目前就这些功能的，原本准备加个评论的功能，可是一直是没有时间（处理页面UI以及所需接口设计的问题），

这个的话，以后再考虑看吧，有空再丰富功能，不出意外的话，这个月月底小程序就会上线。

桔子桑Blog（小程序）V 0.4

猜你喜欢