- 注册时间
- 2016-3-4
- 在线时间
- 0 小时
- 听众
- 1
- 收听
- 0
- 魔扣币
- 2
- 贡献
- 2
- 威望
- 0
- 积分
- 2
该用户从未签到
魔扣新手
- 魔扣币
- 2
- 贡献
- 2
- 威望
- 0
|
魔扣币兑换比例:【 50以下 : ¥1 = 10 魔扣币 】丨【 50 - 100 :¥1 = 20 魔扣币】丨【 100以上:¥1 = 30 魔扣币 】
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?立即注册
x
上周被 小程序 刷了屏,吓得我周末赶紧撸了个 小程序 版的 知乎日报 压压惊, 总结一下这个开发体验,和踩过的坑。
开发环境准备
小程序 出来第二天就被破解,第三天微信就把开发工具开发下载了, 现在只需要下载 微信开发者工具 就可以使用了,
创建项目的时候,要选择无 appid, 这样就不会有 appid 的验证了。
目录结构
小程序中每一个页面都会有三个文件 .wxml .wxss .js ,对应着结构、样式、和逻辑,相当于网页中的 html css 和 js 的关系。
开发第一个页面
代码来自新建项目
新建的项目中,index 下都会看到这些代码,接下来分别介绍 wxml wxss js
wxml
这个是页面结构的描述文件, 主要用于以下内容
wxss
样式文件,和 css 语法基本一致,不过支持的选择器语法有限 看这里, 可以使用 flexbox 完成布局。
内部也可以使用 import 命令引入外部样式文件
js
页面逻辑控制, 遵循 commonJs 规范
这里的js 并不是在 浏览器环境下运行, 所以 window.* 这一类的代码都会报错, dom 操作也是不被允许的,官方目前好像是不能支持其他的 js 库运行,全封闭式,这个以后应该会逐渐完善。
页面上使用 Page 方法来注册一个页面
当我们需要改变 绑定的数据时,必须调用 setData 方法修改,才会触发页面更新,像这样:
条件渲染和列表渲染
以下内容来自微信官方文档。
小程序使用 wx:if="{{condition}}" 完成条件渲染,类似于 vue 的 v-if
也可以用 wx:elif 和 wx:else 来添加一个 else 块:
wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
内置变量 index (数组遍历的下标), item (数组遍历的每一项)
使用wx:for-item可以指定数组当前元素的变量名
使用wx:for-index可以指定数组当前下标的变量名:
事件绑定
wxml 只是用 bind[eventName]="handler" 语法绑定事件
通过 data-* 和 e.target.dateset 传递参数
来源链接: http://www.techweb.com.cn/network/system/2016-10-11/2408451.shtml |
|