官网网站建设:微信小程序版的知乎日报开发实例

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

先看看效果图

开发环境准备

小程序 出来第二天就被破解,第三天微信就把开发工具开发下载了, 现在只需要下载 微信开发者工具 就可以使用了,

创建项目的时候,要选择无 appid, 这样就不会有 appid 的验证了。

目录结构

  1、app.js 注册app逻辑, app.wxss 全局样式文件 app.json 配置信息

  2、pages 存放页面文件

  3、utils 工具类代码

  4、images 图片资源文件

小程序中每一个页面都会有三个文件 .wxml .wxss .js ,对应着结构、样式、和逻辑,相当于网页中的 html css 和 js 的关系。

开发第一个页面

代码来自新建项目

 !--index.wxml-- 
 view 
 view bindtap="bindViewTap" 
 image src="{{userInfo.avatarUrl}}" background-size="cover" /image 
 text {{userInfo.nickName}} /text 
 /view 
 view 
 text {{motto}} /text 
 /view 
 /view 

wxss

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

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

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

js

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

// util.js
function 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

 view wx:if="{{condition}}" True /view 

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

 view wx:if="{{length 5}}" 1 /view 
 view wx:elif="{{length 2}}" 2 /view 
 view wx:else 3 /view 

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

内置变量 index (数组遍历的下标), item (数组遍历的每一项)

 view wx:for="{{items}}" 
 {{index}}: {{item.message}}
 /view 
Page({
 items: [{
 message: 'foo',
 message: 'bar'
})

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

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

 view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName" 
 {{idx}}: {{itemName.message}}
 /view 

事件绑定

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

 view bindtap="bindViewTap" text tap /text /view 
Page({
 bindViewTap: function(e) {
 console.log(e.taget)
})

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

 view bindtap="bindViewTap" data-test-msg="啦啦啦啦啦啦" text tap /text /view 
Page({
 bindViewTap: function(e) {
 // 会自动转成驼峰式命名
 console.log(e.taget.dataset.testMsg) // 啦啦啦啦啦啦
})

目前踩过的坑

事件绑定中 e.target.dataset

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

 view bindtap="bindViewTap" data-test-msg="啦啦啦啦啦啦" 
 view text tap /text /view 
 /view 
Page({
 bindViewTap: function(e) {
 console.log(e.taget.dataset.testMsg) // undefined
})

在线图片加载不稳定

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

总结

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

相关文章

Git 是一个很强大的分布式版本控制系统。它不但适用于管理大型开源软件的源代码,管理私人的文档和源代码也有很多优势。下面脚本之家小编给大家带来了Git 常用命令,感兴趣的朋友一起看看吧

这篇文章主要介绍了Git 2.27.0详细安装步骤,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

UTF-8:Unicode TransformationFormat-8bit,允许含BOM,但通常不含BOM。是用以解决国际上字符的一种多字节编码,它对英文使用8位(即一个字节),中文使用24为(三个字节)来编码

HTTP是一个属于应用层的面向对象的协议,由于其简捷、快速的方式,适用于分布式超媒体信息系统。本文给介绍http 协议非常经典,需要的朋友参考下吧

这篇文章主要介绍了解决git误commit大文件导致不能push问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

这篇文章主要介绍了详解git reset 加不加 --hard的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

这篇文章主要介绍了15个开发者必须知道的chrome技巧,需要的朋友可以参考下

校验验证码的Session是否为空或者校验用户输入的验证码是否合法,构造安全表单的关键就是永远不要相信用户的输入

这篇文章主要介绍了一不小心git rebase后出现(master|REBASE 1/10)的问题及解决办法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

HTTP协议(HyperText Transfer Protocol,超文本传输协议)是用于从WWW服务器传输超文本到本地浏览器的传送协议。

官网网站建设

官网网站建设

作 者:jianzhan

官网网站建设:微信小程序版的知乎日报开发实例 微信小程序版的知乎日报开发实例 更新2016年09月28日 投稿:daisy 相信大家最近都被小程序刷了屏,于是趁周末赶紧撸了个小程序版


立 刻 购 买



扫描二维码分享到微信

在线咨询
联系电话

400-888-8866