微信小程序版的知乎日报开发实例介绍

相信大家最近都被小程序刷了屏，于是趁周末赶紧撸了个小程序版的知乎日报压压惊, 这篇文章主要是总结一下这个开发体验，和踩过的坑。有需要的朋友们可以参考借鉴。

先看看效果图

   {{userInfo.nickName}}   {{motto}} 

/**index.wxss**/.userinfo { display: flex; flex-direction: column; align-items: center;}.userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%;}.userinfo-nickname { color: #aaa;}.usermotto { margin-top: 200px;}

//index.js//获取应用实例var app = getApp()Page({ data: { motto: 'Hello World', userInfo: {} }, //事件处理函数 bindViewTap: function() { wx.navigateTo({  url: '../logs/logs' }) }, onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){  //更新数据  that.setData({  userInfo:userInfo  }) }) }})

新建的项目中，index 下都会看到这些代码，接下来分别介绍 wxml wxss js

wxml

这个是页面结构的描述文件, 主要用于以下内容

1、用标签形式指定组件使用

2、使用 wx:for wx:if 等指令完成一些模板上的逻辑处理

3、使用 bind* 绑定事件

wxss

样式文件，和 css 语法基本一致，不过支持的选择器语法有限 看这里 ， 可以使用 flexbox 完成布局。

内部也可以使用 import 命令引入外部样式文件

@import "common.wxss";.pd { padding-left: 5px;}

js

页面逻辑控制， 遵循 commonJs 规范

// util.jsfunction formatTime(date) { // ....}function formatDate(date, split) { // ...}module.exports = { formatTime: formatTime, formatDate: formatDate}var utils = require('../../utils/util.js')

这里的js 并不是在 浏览器环境下运行， 所以 window.* 这一类的代码都会报错， dom 操作也是不被允许的，官方目前好像是不能支持其他的 js 库运行，全封闭式，这个以后应该会逐渐完善。

页面上使用 Page 方法来注册一个页面

Page({ data:{ // text:"这是一个页面" }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 }})

当我们需要改变 绑定的数据时，必须调用 setData 方法修改，才会触发页面更新，像这样：

Page({ data: {  text: '这是一个页面' }, onLoad: function() {  this.setData({   text: 'this is page'  }) }})

条件渲染和列表渲染

以下内容来自微信官方文档。

小程序使用 wx:if="" 完成条件渲染，类似于 vue 的 v-if

 True 

也可以用 wx:elif 和 wx:else 来添加一个 else 块：

 1  2  3 

wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

内置变量 index （数组遍历的下标）， item （数组遍历的每一项）

 {{index}}: {{item.message}}Page({ items: [{ message: 'foo', },{ message: 'bar' }]})

使用wx:for-item可以指定数组当前元素的变量名

使用wx:for-index可以指定数组当前下标的变量名：

 {{idx}}: {{itemName.message}}

事件绑定

wxml 只是用 bind[eventName]="handler" 语法绑定事件

tapPage({ bindViewTap: function(e) {  console.log(e.taget) }})

通过 data-* 和 e.target.dateset 传递参数

tapPage({ bindViewTap: function(e) {  // 会自动转成驼峰式命名  console.log(e.taget.dataset.testMsg) // 啦啦啦啦啦啦 }})

目前踩过的坑

事件绑定中 e.target.dataset

当在父组件绑定事件和参数，点击时又子组件冒泡事件到父组件，这个时候 e.target.dataset 为空

 tapPage({ bindViewTap: function(e) {  console.log(e.taget.dataset.testMsg) // undefined }})

在线图片加载不稳定

在知乎日报这个项目上有大量图片需要从网上下载，这里 image 组件额显示显得极其不稳定，有很多的图片都显示不出来.

总结

微信小程序现在还在内测阶段，有很多的问题需要完善，不过对于开发速度和体验来说还是不错的，期待正式发布的那一天。以上就是本文的全部内容了，希望对大家学习使用微信小程序能有所帮助。

以上就是微信小程序版的知乎日报开发实例介绍的详细内容，更多请关注 第一PHP社区 其它相关文章！