微信小程序知乎日报开发实例讲解

开发环境准备

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

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

目录结构

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

pages 存放页面文件

utils 工具类代码

images 图片资源文件

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

开发第一个页面

代码来自新建项目

wxml

{{userInfo.nickName}}


{{motto}}

wxss

index.js
新建的项目中，index 下都会看到这些代码，接下来分别介绍 wxml wxss js
wxml
这个是页面结构的描述文件, 主要用于以下内容
用标签形式指定组件使用 
使用 wx:for wx:if 等指令完成一些模板上的逻辑处理
使用 bind* 绑定事件
wxss
样式文件，和 css 语法基本一致，不过支持的选择器语法有限 看这里， 可以使用 flexbox 完成布局。
内部也可以使用 import 命令引入外部样式文件
js
页面逻辑控制， 遵循 commonJs 规范
这里的js 并不是在 浏览器环境下运行， 所以 window.* 这一类的代码都会报错， dom 操作也是不被允许的，官方目前好像是不能支持其他的 js 库运行，全封闭式，这个以后应该会逐渐完善。
页面上使用 Page 方法来注册一个页面
当我们需要改变 绑定的数据时，必须调用 setData 方法修改，才会触发页面更新，像这样：
条件渲染和列表渲染
以下内容来自微信官方文档。
小程序使用 wx:if="" 完成条件渲染，类似于 vue 的 v-if
也可以用 wx:elif 和 wx:else 来添加一个 else 块：
wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
内置变量 index （数组遍历的下标）， item （数组遍历的每一项）
使用wx:for-item可以指定数组当前元素的变量名
使用wx:for-index可以指定数组当前下标的变量名：
事件绑定
wxml 只是用 bind[eventName]="handler" 语法绑定事件
目前踩过的坑
事件绑定中 e.target.dataset
当在父组件绑定事件和参数，点击时又子组件冒泡事件到父组件，这个时候 e.target.dataset 为空
在线图片加载不稳定
在知乎日报这个项目上有大量图片需要从网上下载，这里 image 组件额显示显得极其不稳定，有很多的图片都显示不出来.
                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!