今天看了几个小时的微信小程序说说心得体会
小程序是个前端框架
根据微信相关提供了很多接口
1 先说说各种后缀的文件
.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件
2 JSON 配置
app.json
和 project.config.json
,此外在 pages/logs
目录下还有一个 logs.json
项目比较重要的JSON文件
app.json
是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等.
page.json
其实用来表示 pages/logs 目录下的 logs.json
这类和小程序页面相关的配置。
project.config.json通常大家在使用一个工具的时候,都会针对各自喜好做一些个性化配置,例如界面颜色、编译配置等等,当你换了另外一台电脑重新安装工具的时候,你还要重新配置
3 数据绑定
WXML 是这么写 :
<text>{{msg}}</text>
JS 只需要管理状态即可:
this.setData({msg: \'Hello World\'})
通过 {{ }}
的语法把一个变量绑定到界面上,我们称为数据绑定
4 模板
WXML 模板
从事过网页编程的人知道,网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML
是用来描述当前这个页面的结构,CSS
用来描述页面的样子,JS
通常是用来处理这个页面和用户的交互。
同样道理,在小程序中也有同样的角色,其中 WXML
充当的就是类似 HTML
的角色。打开 pages/index/index.wxml
,你会看到以下的内容:
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}">获取头像昵称</button>
<block wx:else>
<image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
模板中有专门的模板使用语法
请发表评论