开发环境准备
小程序出来第二天就被破解,第三天微信就把开发工具开发下载了, 现在只需要下载就可以使用了,
创建项目的时候,要选择无 appid, 这样就不会有 appid 的验证了。
目录结构
app.js 注册app逻辑, app.wxss 全局样式文件 app.json 配置信息
utils 工具类代码
小程序中每一个页面都会有三个文件 .wxml .wxss .js ,对应着结构、样式、和逻辑,相当于网页中的 html css 和 js 的关系。
开发第一个页面
代码来自新建项目
wxml
{{userInfo.nickName}} {{motto}}
wxss
index.js
新建的项目中,index 下都会看到这些代码,接下来分别介绍 wxml wxss js
用标签形式指定组件使用
使用 wx:for wx:if 等指令完成一些模板上的逻辑处理
使用 bind* 绑定事件
样式文件,和 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 为空
在知乎日报这个项目上有大量图片需要从网上下载,这里 image 组件额显示显得极其不稳定,有很多的图片都显示不出来.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。