【学习打卡】第十四天 前端工程师2022版 小程序基础API

课程名称： 前端工程师2022版

课程章节： 小程序基础API

主讲老师：Dell Lee

课程内容：

今天学习的内容包括：

1-1页面级别的配置

 index.js文件：业务逻辑开发 

index.json文件：配置文件 

index.wxml文件：类似于html文件，描述页面结构 

Index.wxss文件：类似于css文件，样式文件（页面级别的样式优先于全局，页面级别样式只管当前页面）

全局配置  

app.js：全局逻辑

app.json：全局通用配置

app.wxss: 全局样式文件（全局样式文件管理所有页面的样式）

页面级别的配置的优先级大于整个应用级别的配置。

1-2全局配置文件的使用

全局配置文件的作用：

（1）project.config.json:配置项目的一些信息，是否使用es6，一般不会改；

（2）sitemap.json：对页面级别的描述。它的目的可以让我们的小程序在微信里面更容易被搜索到，新加特性；

（3）app.json  

（4）对配置的问题可以在  文档—— > 框架 —— > 小程序配置 —— > 全局配置  中查阅文档

2-8页面级别配置项

（1）页面的配置只能配置app.json里类似于window类的配置，且页面级别的配置会覆盖全局配置里window的配置

（2）对配置的问题可以在  文档—— > 框架 —— > 小程序配置 —— > 页面配置  中查阅文档

1-3全局逻辑中生命周期函数

创建一个小程序

1、生命周期函数指的是在某一时刻会自动执行的函数

在小程序启动的时候 自动执行的函数

onlaunch(options){}

options 参数的内容：

    1、path---小程序在启动的那一刻 访问的是哪个路径下的文件

    2、query---记录了用户id。可识别到是哪个用户访问的？？？ 可以在哪里配置？？（添加编译模式--参数  例如：promoteId=123）

    3、scene----表示用户进入小程序的方式 ，使用编号表示，可以修改（添加编译模式--进入场景）

1-4全局方法及数据的定义及调用方式

App({ 

  //  生命周期函数，指的是在某一时刻会自动执行的函数

  onLaunch(options) { },

  // 在小程序重新展示的时候，自动执行的函数

  onShow(options) { },

  // 当小程序取消展示的时候，自动执行的函数

  onHide(){},

  // 当脚本执行错误时，自动执行的函数

  onError(msg) { },

  // 自定义函数

  sayHello() {  },

//自定义数据

globalData: { }

})

可以在生命周期函数中调用它

// 创建一个小程序
App({ 
  //  生命周期函数，指的是在某一时刻会自动执行的函数
  onLaunch(options) {
    console.log('onLaunch',options)
    this.sayHello()
  },
})

也可以在页面里调用它

Page({
  onLoad() {
    console.log(app.sayHello(),app.globalData,'index')
  }
})

1-5页面级别生命周期函数

Page({
    // 页面运行的某个时刻会自动执行的函数
    // 页面被加载到内存里的时候，或者页面第一次启动的时候
  onLoad() {
    console.log('onLoad')
  },
  // 页面被加载到内存里的时候，或者页面第一次启动的时候
  // 并且页面被渲染完成之后自动执行
  onReady() {
    console.log('onReady')
  },
  // 页面每次被展示的时候自动执行
  onShow() {
    console.log('onshow')
  },
  // 页面每次被取消的时候自动执行
  onHide() {
    console.log('onhide')
  },
  // 每次下拉刷新时执行
  onPullDownRefresh() {
    console.log('onPullDownRefresh')
  },
  // 页面到最底部时会自动执行
  onReachBottom(){
    console.log('onReachBottom')
  },
  // 当点击分享时自动执行的函数
  onShareAppMessage() {
    console.log('onShareAppMessage');
    return{
      title:'share',
      path:'pages/index/index'
    }
  },
  // 当页面滚动时自动执行的函数 
  onPageScroll(){
    console.log('onPageScroll')
  }
})

1-6页面逻辑层数据定义及与页面的串联

index.js页面

Page({
  data:{ 
    name:'daisy'
  },
  changename(){
    this.setData({
      name:'lee'
    })
  }
})

index.wxml页面

<view class="container">
  <text class="userinfo-nickname" bindtap="changename">{{name}}</text>
</view>

1-7逻辑层中的API

index.js页面

api有很多，参考文档

Page({
  onShow() {
      //发请求
    wx.request({
      url: 'https://www.fastmock.site/mock/f61155fb8fa5bb1bc6f1723d519546f1/weixin/api/getData',
      success(res){
        console.log(res)
      }
    })
  }
})

1-8视图层的数据绑定

index.wxml页面：

wx:if是销毁Dom让节点不存在

hidden: 是让节点隐藏

<view wx:if="{{showName}}" bindtap="handleTap">{{name}}</view>
<checkbox checked="{{true}}"></checkbox>
<view hidden="{{!showHelloWorld}}">hello world</view>

index.js页面

Page({
  data:{
    showName:true,
    name:'daisy',
    showHelloWorld:true
  },
  handleTap(){
    this.setData({showName:false})
  }
})

1-9 视图层循环展示内容

index.wxml页面：

①循环展示data里面的users

②因数据里定义了三项内容，所以页面会循环3次，所以会展示三次Hello World

<view wx:for="{{users}}" wx:key="*this">{{item.name}}</view>
<block wx:for="{{num}}" wx:key="*this">
  <view>hello</view>
  <view>world</view>
</block>

index.js页面：

Page({
  data:{
    users:[{name:'Lily'},{name:'Tom'}],
    num:[1,2,3]
  },
  handleTap(){
    this.setData({showName:false})
  }
})

今日收获：抽空复习了一下之前学的小程序，长时间不看又遗忘很多

写成文章也有好处，遇到不会的可以随时来找，如果慕课网的手记能像有道笔记一样，可以直接看到标题就更好了，今日除了复习小程序，剩下的时间都用在解决路由问题，有关路由的问题已经整理成笔记了，以便下次遇到问题能随时翻看