微信小程序版知乎日报开发示例

先看效果图

开发环境准备

小程序出来后第二天就被破解了。第三天，微信开发下载了开发工具。现在只能下载微信开发者工具使用。

创建项目时，选择no appid，这样就不会验证appid。

目录结构

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

2.页面存储页面文件

3.utils工具类代码

4.图像图像资源文件

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

开发第一页

来自新项目的代码

！-index . wxml-view class=' container ' view bind tap=' bindwiewtap ' class=' userinfo ' image class=' userinfo-avatar ' src=' http : { {userInfo . avatar URL } } ' background-size=' cover '/image text class=' userinfo-昵称' { userinfo .昵称} }/text/view class=' user motive ' text class=' user-motive ' { motive } }/text/view/view/* * index . wxss * */。userinfo { display: flexflex-direction:柱；align-items:居中；}.user info-avatar { width : 128 rpx；height: 128rpxmargin: 20rpx边界半径：50%；}.user info-昵称{ color: # aaa}.用户座右铭{ margin-top : 200 px；}//index.js//获取应用程序实例varapp=getapp()页面({ data : { motto : ' hello world '，user info 3360 } }，//事件处理函数bindwiewtap 3360 function(){ wx . navigateto({ URL : './logs/logs'})}，onload : function(){ console . log(' onload ')var=this//调用应用程序实例的方法获取全局数据app . getuser info(function(user info){//Update data that。setdata({ user info : user info })} })，这些代码会在index下看到，然后分别介绍wxml wxsjs

wxml

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

1.指定组件使用标签形式的视图/视图

2.使用wx:for wx:if和其他指令来完成某些模板上的逻辑处理

3.用bind*绑定事件

wxss

样式文件基本上与css语法相同，但是支持的选择器语法是有限的。在这里，您可以使用flexbox来完成布局。

在内部，也可以使用“导入”命令导入外部样式文件

@ import ' common.wxss。PD { padding-left : 5px；}js

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

//util . jsfunction format time(date){//.}函数formatDate(日期，拆分){ //.} module . exports={ format time : format time，format date : format date } varutils=require('././utils/util . js’)这里的js不在浏览器环境中运行，所以像window这样的代码。*将报告错误，并且不允许dom操作。目前官方似乎无法支持其他js库运行，是全封闭的，以后要逐步完善。

使用页面上的Page方法注册页面

Page({ data:{ //text: '这是一个页面' }，onload : function(选项){ //页面初始化选项是页面跳转带来的参数}，onread : function(){//页面渲染完成}，OnShow:function(){ //页面显示}，onHide:function(){ //页面隐藏}，onUnload:function(){ //页面关闭})当我们需要更改绑定数据时，必须调用

Page({ data: {text: '这是一个页面' }，onload: function () {this。setdata ({text: '这是页面' })})条件呈现和列表呈现

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

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

查看wx : if=' { { condition } } ' true/view您还可以使用wx:elif和wx:else添加else块：

view wx : if=' { { length 5 } } ' 1/view wx : elf=' { { length 2 } } ' 2/view wx : else 3/view wx : for control属性绑定了一个数组，可以使用数组中每个项的数据重复呈现该组件。

内置变量索引(数组遍历的下标)、项(数组遍历的每一项)

Wx:在viewwx:中用于=“{ { items } }”{ { index } } : { { item }。message } }/view page({ items :[{ message 3360 ' foo '，}，{message:' bar'}]})

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

查看wx : for=' { { array } } ' wx : for-index=' idx ' wx : for-item=' item name ' { { idx } } : { { item name }。message}}/view事件绑定

Wxml只是用bind[eventName]='handler '的语法绑定事件

viewpindtap=' bindwiewtap ' class=' user info ' text tap/text/viewpage({ bindwiewtap 3360 function(e){ console . log(e . taget)})通过data-和e.target.dateset传递参数

视图bind tap=' bindwiewtap ' data-test-msg=' la la la la la ' class=' user info ' text tap/text/view page({ bindwiewtap 3360 function(e)}//将自动转换为驼峰命名的console . log(e . tag . dataset . testmsg)//la la la la

事件绑定中的E.target.dataset

当事件和参数绑定到父组件，而子组件在单击时将事件冒泡到父组件时，此时e.target.dataset为空

视图绑定tap=' bindwiewtap ' data-test-msg=' la la la la la ' class=' user info ' viewtexttap/text/view/view page({ bindwiewtap 3360 function(e){ console . log(e . tag . dataset . testmsg)//undefined })。

知乎日报这个项目，有大量的图片需要从网上下载。在这里，图像成分的显示极其不稳定，许多图片无法显示。

摘要

微信小程序还处于beta测试阶段，还有很多问题需要改进，但对开发速度和体验还是有好处的，期待正式发布。以上就是本文的全部内容，希望对大家学习如何使用微信小程序有所帮助。