今天看了几个小时的微信小程序说说心得体会

今天看了几个小时的微信小程序说说心得体会

小程序是个前端框架

根据微信相关提供了很多接口

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>
模板中有专门的模板使用语法

猜你喜欢

转载自www.cnblogs.com/baker95935/p/10642925.html