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

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

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

边距是自适应的(针对不同机型),通过js控制,部分js如下:

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

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

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

//统一函数,同步硬件信息的处理到其他页面,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);
}
},)
},

这段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: ,
itemW_H: (that.data.windowWidth - ) /
})
});
  }
})

接下来,就要用到这个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);
}
},);
},

这个方法很简单,设定一个定时函数,如果全局变量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的更多相关文章

  1. WordPress版微信小程序3.0版发布

    距离WordPress版微信小程序上一个版本的发布过去了一个月了.在此间,我的工作有些变化,加上正在开发新版本,目前开源版的完善和升级稍稍有些滞后. 虽然这个版本是3.0版,期间有个过渡的2.8版,不 ...

  2. 【Gamma】“北航社团帮”发布说明——小程序v3.0

    目录 Gamma版本新功能 小程序v3.0新功能 新功能列表 新功能展示 这一版修复的缺陷 Gamma版本的已知问题和限制 小程序端 网页端 运行.安装与发布 运行环境的要求 安装与发布 小程序 网页 ...

  3. 【Gamma】“北航社团帮”测试报告——小程序v3.0

    目录 测试计划.过程和结果 后端测试--单元测试与覆盖率 后端测试--压力测试 展示部分数据 平均数据 前端测试--小程序v3.0 新功能 各页面均可正常打开,跳转,回退 授权登录与权限检查 页面数据 ...

  4. 【Beta】“北航社团帮”测试报告——小程序v2.0与网页端v1.0

    目录 测试计划.过程和结果 后端测试--单元测试与覆盖率 后端测试--压力测试 展示部分数据 平均数据 前端测试--小程序v2.0 授权登录与权限检查 新功能的测试 兼容性测试 性能测试 前端测试-- ...

  5. 【Beta】“北航社团帮”发布声明——小程序v2.0与网页端v1.0

    目录 Beta版本新功能 小程序v2.0新功能 新功能列表 功能详情图 新功能动图展示 网页端v1.0功能 登录方式 社团信息的修改 新闻的录入和修改 活动的录入和修改 这一版修复的缺陷 Beta版本 ...

  6. iOS学小程序从0到发布(适合iOS开发看)

    Emmmm,最近一波失业潮.富某康.某团.摩某.京某.知某.某浪.58 某大面积裁员,那么在这个千钧一发之际,单纯iOS开发也着实不好过,回过头看一下,裁掉的都是单一选手,为了节约成本公司留下的都是身 ...

  7. 【Alpha】“北航社团帮”小程序v1.0测试报告

    目录 测试计划.过程和结果 后端单元测试 后端压力测试 测试结果 指标解释 前端测试 授权登录与权限检查 功能测试 兼容性测试 性能测试 回答课程组问题 测试中发现的bug 场景测试 测试矩阵 出口条 ...

  8. 【Alpha】“北航社团帮”小程序v1.0发布声明

    我们的"北航社团帮"小程序发布啦!!! Alpha版本功能 功能列表和详情图 模块 功能 登录 授权登录,游客模式,无需填写信息 活动展示 首页轮播热度最高的四个活动,查看活动详情 ...

  9. 【Alpha】“北航社团帮”小程序v1.0项目展示

    目录 1.团队介绍 2.回答一些工程问题 整个项目的目标和预期功能 整个项目的预期典型用户 整个项目的预期用户数量 alpha满足的用户需求 alpha用户量一览 团队分工及经验教训 团队项目管理 时 ...

随机推荐

  1. Zabbix 关联onealert实现电话报警

    Zabbix 关联onealert实现电话报警 系统环境:Linux Centos 7.4 应用版本:Zabbix 3.0.22 OneAlert官方地址:http://www.onealert.co ...

  2. 关于Task的认识

    首先来说说 Task.Factory.StartNew这种方式来创建Task,这里的WaitAll()指的是等待所有Task执行完成,并且里面的Task参数(t1,t2)是异步的,先以匿名委托方式 s ...

  3. Yahoo网站性能优化的34条规则

    摘自:http://blog.chinaunix.net/uid/20714478/cid-74195-list-1.html Yahoo网站性能优化的34条规则 1.尽量减少HTTP请求次数 终端用 ...

  4. ELK之elasticsearch5.6的安装和head插件的安装

    这里选择的elasticsearch为5.6的新版本,根据官方文档有几种暗装方式: https://www.elastic.co/guide/en/elasticsearch/reference/cu ...

  5. 20145314郑凯杰 《Java程序设计》实验三 敏捷开发与XP实践实验报告

    20145314郑凯杰 <Java程序设计>实验二 实验报告 实验要求 完成实验.撰写实验报告,实验报告以博客方式发表在博客园,注意实验报告重点是运行结果,遇到的问题(工具查找,安装,使用 ...

  6. 推荐一个快速了解移植uboot以及linux到新板子上的ppt教程

    链接地址在此: https://elinux.org/images/2/2a/Schulz-how-to-support-new-board-u-boot-linux.pdf

  7. iOS日常学习 - 每个Xcode开发者应该知道的七个使用技巧

    本文为转载学习使用原文链接 工欲善其事,必先利其器.对一个iOS开发者来说,这就意味着对Xcode的熟练掌握程度.Xcode是一个学习起来有点难度的软件,下面的这些技巧或许可以显著的提高你的编程效率. ...

  8. jar包中使用log4j2不起作用

    某程序中有使用到log4j2,将该程序打包成jar,使用以下命令执行时,发现log4j不输出 java -cp Tool.jar com.zhen.nameOnce.Log4jTest 且报以下错误 ...

  9. 配置了java环境变量后不起作用

    我的电脑上装了好几个版本的jdk,有jdk1.6.jdk1.8.但是我的环境变量是设置jdk1.6的.然而打开cmd,查看Java版本却显示的是1.8,这让我百思不得其解.后来发现了问题. 问题:在p ...

  10. jQuery回车键快速切换下一个input文本框解决方案

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...