day2

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

6. 小程序初体验

   • 数据绑定
     • 类似于vue的数据绑定形式，mustache语法
     • 在对应的js文件（逻辑层）声明数据

     data: {
         name: 'Coderwhy',
         age: 18,
     },
     

     • 在wxml文件使用mustache语法引用，即{{}}

     Hello {{name}}
     我的年龄: {{age}} 
     

   • 列表渲染
     • 数组变量
     • 在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语法引用

     {{item.name}}-{{item.age}}
     

   • 事件监听
     • 绑定事件：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里绑定点击事件

         当前计数: {{counter}}
         +
         -
     

7. 小程序的MVVM架构

   
   
   小程序MVVM.jpg

8. 配置小程序

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

9. 全局配置
   官方文档
   

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

10. 页面配置
    官方文档

    • 每个小程序页面都可以使用.json文件来对本页面的窗口表现进行配置
      • 页面中配置项在当前页面会覆盖app.json的window中相同的配置项