day2

day2

记录一下踩坑之路
Git 克隆错误RPC failed; curl 56 Recv failure: Connection was reset.’ 及克隆速度慢问题解决
 node_modules\node-sass: Command failed.问题解决

小程序初体验

数据绑定
- 类似于vue的数据绑定形式，mustache语法
- 在对应的js文件（逻辑层）声明数据
```
data: {
    name: 'Coderwhy',
    age: 18,
},
```
- 在wxml文件使用mustache语法引用，即{{}}
```
<view>Hello {{name}}</view>
<view>我的年龄: {{age}}</view> 
```

列表渲染

数组变量
在js文件里声明数组变量：

    students: [
        {id: 110, name: 'kobe', age: 30},
        {id: 111, name: 'james', age: 28},
        {id: 112, name: 'curry', age: 32},
        {id: 113, name: 'why', age: 18}
    ],

在wxml文件使用mustache语法引用

<view wx:for="{{students}}">{{item.name}}-{{item.age}}</view>

事件监听

绑定事件：bindtap='函数'
不同于vue，小程序不会实现双向绑定，因此写函数的时候要setData

  handleBtnClick() {
    // 1.错误做法: 界面是不会刷新的
    // this.data.counter += 1
    // console.log(this.data.counter)

    // 2.this.setData()
    this.setData({
        counter: this.data.counter + 1
    })
},
  handleSubtraction() {
    this.setData({
        counter: this.data.counter - 1
    })
}

wxml里绑定点击事件

    <view>当前计数: {{counter}}</view>
    <button size='mini' bindtap='handleBtnClick'>+</button>
    <button size='mini' bindtap='handleSubtraction'>-</button>

小程序的MVVM架构

小程序MVVM.jpg
配置小程序
- 小程序的很多开发需求都被规定在了配置文件中
- 为什么
  - 这样做可以更有利于我们的开发效率
  - 并且可以保证开发出来的小程序的某些风格时比较一致的
  - 比如导航栏-顶部TabBar，以及页面路由等等
- 常见的配置文件有那些
  - peoject.config.json：项目配置文件，比如项目名称、appid等，可在小程序开发工具右上角详情处修改，记录保存项目的信息，避免在不一样的环境下项目相关配置被改变；相关说明
  - sitemap.json：小程序搜索相关的；相关说明
  - app.json：全局配置；
  - page.json ：页面配置；
全局配置
官方文档

较重要的全局配置.png
- pages：页面路径列表
  - 用于指定小程序由哪些页面组成，每一项都对应一个页面的路径信息
  - 小程序中所有的页面都是必须在pages中进行注册的
  - 新建page时，可以右键，也可以直接在app.json文件中输入，开发工具会自动新建
- window：全局的默认窗口展示
  - 用户指定窗口如何展示，其中还包含了很多其他的属性，具体查看官方文档
- tabBar：顶部tab栏的展示
  - 至少包含两项tab，最多5个
  - 在pagePath属性中指定要跳转的页面
  - 在text属性中指定导航的名字
  - 在iconPath属性中指定图标
  - 在selectedIconPath属性中指定选中时的图标
    tips：需要将代码规范化时，按住alt+shift+F键即可
页面配置
官方文档
- 每个小程序页面都可以使用.json文件来对本页面的窗口表现进行配置
  - 页面中配置项在当前页面会覆盖app.json的window中相同的配置项

推荐阅读更多精彩内容