小程序项目学习-- 第二章：注册App和Page-常见内置组件-wxss样式

第二章：注册App和Page-常见内置组件-wxss样式

01_(掌握)注册小程序App实例-App函数调用

// app.js
App({
    
    
  onLaunch() {
    
    
    // 1.读取本地数据
    const token = wx.getStorageSync('token')
    const user = wx.getStorageSync('user')
    this.globalData.token = token
    this.globalData.user = user

    // 2.登录逻辑
    wx.login({
    
     success: res => {
    
    } })

    // 3.请求数据
    wx.request({
    
     url: 'url' })
  },
  globalData: {
    
    
    token: "",
    userInfo: {
    
    }
  }
})

02_(掌握)注册小程序-判断进入场景和生命周期

App({
    
    
  onLaunch(options){
    
    
    console.log(options);
  },
  onShow(options){
    
    
    console.log("onShow:",options);
  },
  onHide(){
    
    
    console.log("onHide");
  }
})

03_(掌握)注册小程序-App数据共享和页面获取

globalData数据不是响应式的，这里共享的数据通常是一些固定的数据

logs.js

Page({
    
    
  data: {
    
    
    userInfo:{
    
    }
  },
  onLoad() {
    
    
    // 获取共享的数据：App实例中的数据
    // 1.获取app实例对象 通过getApp获取app.js中的数据
    const app = getApp()
    // 2.从app实例对象中获取数据
    const token = app.globalData.token
    const userInfo = app.globalData.userInfo
    console.log(token,userInfo);
    //3.拿到token的目前是为了验证登录的用户，携带token发送网络请求
  
    // 4.将数据展示到界面上面 --对象增强写法 ：键值对相同的时候可以合并省略
    this.setData({
    
    userInfo})
    console.log(this.data.userInfo);

  }
})

// app.js
App({
    
    
  // globalData数据不是响应式的，这里共享的数据通常是一些固定的数据
  globalData:{
    
    
    token:"1123422341233",
    userInfo:{
    
    
      name:"孙悟空",
      power:"1300"
    }
  }
})
<!--logs.wxml-->
<view class="container log-list">
  <view>name:{
    
    {
    
    userInfo.name}}</view>
  <view>name:{
    
    {
    
    userInfo.power}}</view>
</view>

04_(掌握)注册小程序-登录操作和storage存取数据

// app.js
App({
    
    
  // globalData数据不是响应式的，这里共享的数据通常是一些固定的数据
  globalData:{
    
    
    token:"",
    userInfo:{
    
    }
  },
  // 初始加载的方法函数
  onLaunch(options){
    
    
  //  0.进行登录操作的逻辑判断
  if(!token || !userInfo){
    
    
    // 将成功的数据保存到storage中
    console.log("登录成功");
    wx.setStorageSync("token", "12314534trgdf")
    wx.setStorageSync("userInfo", {
    
    name:"孙悟空",power:13300})
  }
  // 1.读取本地数据
  const token = wx.getStorageSync("token")
  const userInfo = wx.getStorageSync("userInfo")
  // 2.将数据保存到globalData中
  this.globalData.token = token
  this.globalData.userInfo = userInfo
  // 3.发送网络请求,优先请求一些必要数据
  wx.request({
    
    
    url: 'url',
  })
  },
  onShow(options){
    
    
    console.log("onShow:",options);
  },
  onHide(){
    
    
    console.log("onHide");
  }
  //  
})

05_(掌握)知识点-代码组件方式调整

1.获取item ,需要在wxml中自定义属性,内置的自定义属性data-item=“{ {item}}” 就是往点击事件中添加属性 data-item=“{ {item}}”

这里只有和wxml保持一直即可 const item = event.target.dataset.aaa wxml == data-aaa=“{ {item}}”

每一个按钮就是一个路径知识点的跳转

// index.js
Page({
    
    
  data: {
    
    
    pages: [
      {
    
     name: "01_初体验", path: "/pages/01test/index" },
      // 路径不要写中文会报错
      {
    
     name: "02_页面配置", path: "pages/02_页面配置/index" }
    ]
  },
  onBtnClick(event) {
    
    
    // 1.获取item ,需要在wxml中自定义属性,内置的自定义属性data-item="{
    
    {item}}" 就是往点击事件中添加属性 data-item="{
    
    {item}}"
    // 这里只有和wxml保持一直即可   const item = event.target.dataset.aaa  wxml  == data-aaa="{
    
    {item}}"
    const item = event.target.dataset.item
    console.log(event);
    // 2.跳转路径
    wx.navigateTo({
    
    
      url: item.path,
    })
  }
})
wxml
<!-- home首页 -->
<view class="pages">
  <block wx:for="{
    
    {pages}}" wx:key="name">
    <button
      type="primary" 
      bindtap="onBtnClick"
//自定义属性 ，添加到event对象属性中
      data-item="{
    
    {item}}"
    >
      {
    
    {
    
     item.name }}
    </button>
  </block>
</view>

06_(掌握)注册页面Page-页面加载-请求数据展示数据

坑

1.微信开发者工具不能固定到任务栏，会启动不成功

2.微信小程序 [sitemap 索引情况提示] 根据 sitemap 的规则[0],当前页面 [pages/index/index]

project.config.json
{
    
    
  "setting": {
    
    
	"checkSiteMap":false,
   }
}

3.网络请求的时候记得不校验合法域名的请求

index.wxml
<view class="banner">
  <swiper circular autoplay indicator-dots="{
    
    {true}}">
    <block wx:for="{
    
    {banners}}" wx:key="acm">
      <swiper-item>
        <!-- image组件默认宽度和高度: 320x240 -->
        <image mode="widthFix" src="{
    
    {item.image}}"></image>
      </swiper-item>
    </block>
  </swiper>
</view>

index.js
Page({
    
    
  data: {
    
    
    banners: [],
    recommends: [],
  },
  // 1.作用一: 发送网络请求, 请求数据
  onLoad() {
    
    
    console.log("onLoad");
    // 发送网络请求
    wx.request({
    
    
      url: "http://123.207.32.32:8000/home/multidata",
      success: (res) => {
    
    
        const data = res.data.data
        const banners = data.banner.list
        const recommends = data.recommend.list
        this.setData({
    
     banners, recommends })
      }
    })
  },})

07_(掌握)注册页面-初始化数据和事件的监听

08_(理解)注册页面-页面的生命周期函数解析

wxml
<!--pages/01_初体验/index.wxml-->
<view class="banner">
  <swiper circular autoplay indicator-dots="{
    
    {true}}">
    <block wx:for="{
    
    {banners}}" wx:key="acm">
      <swiper-item>
        <!-- image组件默认宽度和高度: 320x240 -->
        <image mode="widthFix" src="{
    
    {item.image}}"></image>
      </swiper-item>
    </block>
  </swiper>
</view>

<view class="counter">
  <view>当前计数: {
    
    {
    
     counter }}</view>
</view>

<view class="buttons">
  <button bindtap="onBtn1Click">按钮1</button>

  <block wx:for="{
    
    {btns}}" wx:key="*this">
    <button 
      class="btn" 
      style="background: {
    
    {item}};"
      bindtap="onBtnClick"
      data-color="{
    
    {item}}"
    >
      {
    
    {
    
     item }}
    </button>
  </block>
</view>


<view class="list">
  <block wx:for="{
    
    {30}}" wx:key="*this">
    <view>列表数据:{
    
    {
    
     item }}</view>
  </block>
</view>
index.js
// pages/01_初体验/index.js
Page({
    
    
  data: {
    
    
    banners: [],
    recommends: [],

    // 2.作用二: 定义本地固定的数据
    counter: 100,

    btns: ["red", "blue", "green", "orange"]
  },
  // 1.作用一: 发送网络请求, 请求数据
  onLoad() {
    
    
    console.log("onLoad");

    // 发送网络请求
    wx.request({
    
    
      url: "http://123.207.32.32:8000/home/multidata",
      success: (res) => {
    
    
        const data = res.data.data
        const banners = data.banner.list
        const recommends = data.recommend.list
        this.setData({
    
     banners, recommends })
      }
    })
  },

  // 3.绑定wxml中产生事件后的回调函数
  onBtn1Click() {
    
    
    console.log("onBtn1Click");
  },
  onBtnClick(event) {
    
    
    //自定义属性--通过在wxml中data-color="{
    
    {item}}" 添加属性 通过event.target.dataset.color 获取属性，进行对应的操作
    console.log("btn click:", event.target.dataset.color);
  },

  // 4.绑定下拉刷新/达到底部/页面滚动
  onPullDownRefresh() {
    
    
    console.log("onPullDownRefresh");
  },
  onReachBottom() {
    
    
    console.log("onReachBottom");
    // 加载的时候数据是 this.data.counter +30
    this.setData(
        {
    
    
          counter :this.data.counter +30
        }
      )
  },
  onPageScroll(event) {
    
    
    console.log("onPageScroll:", event);
  },

  // 生命周期函数: 
  onShow() {
    
    
    console.log("onShow");
  },
  onReady() {
    
    
    console.log("onReady");
  },
  onHide() {
    
    
    console.log("onHide");
  },
  onUnload() {
    
    
    console.log("onUnload");
  }
})

第二章：下午:小程序常见的内置组件

09_(掌握)常见组件-Text组件的使用

<!-- text组件 -->
<text> Hellow World</text>
<text user-select>{
    
    {
    
    message}}</text>
<!-- 写上属性就是true，不写就是false -->
<text user-select="{
    
    {true}}">{
    
    {
    
    name}}</text>
<text decode>&gt;</text>

10_(掌握)常见组件-Button组件的使用

<!-- 1.基本使用 -->
<button>按钮</button>

<button size="mini">size属性</button>

<button size="mini" type="primary">type属性</button>
<button size="mini" type="warn">type属性</button>
<button size="mini" class="btn">自定义属性</button>

<button size="mini" plain>plain属性</button>
<button size="mini" disabled>disabled属性</button>
<button size="mini" loading class="btn">loading属性</button>
//按下按钮添加active class属性 指定按钮按下去的样式类。当 `hover-class="none"` 时，没有点击态效果 ，这里的样式类是active
<button size="mini" hover-class="active">hover效果</button>
<view></view>

11_(掌握)常见组件-Button组件的open-type

<!--pages/02_common_cpns/index.wxml-->
<view>------------------ button组件 ------------------</view>
<!-- 1.基本使用 -->
<button>按钮</button>

<button size="mini">size属性</button>

<button size="mini" type="primary">type属性</button>
<button size="mini" type="warn">type属性</button>
<button size="mini" class="btn">自定义属性</button>

<button size="mini" plain>plain属性</button>
<button size="mini" disabled>disabled属性</button>
<button size="mini" loading class="btn">loading属性</button>
<button size="mini" hover-class="active">hover效果</button>
<view></view>

<!-- 2.open-type属性 -->
<button open-type="contact" size="mini" type="primary">打开会话</button>
<!-- API已经改了，这个本身也获取不到用户信息 -->
<button 
  open-type="getUserInfo"
  bindgetuserinfo="getUserInfo"
  size="mini" 
  type="primary"
>
  用户信息
</button>
<button size="mini" type="primary" bindtap="getUserInfo">用户信息2</button>
<button 
  size="mini" 
  type="primary"
  open-type="getPhoneNumber"
  bindgetphonenumber="getPhoneNumber"
>
  手机号码
</button>


<!-- text组件 -->
<view>------------------ text组件 ------------------</view>
<text>Hello World</text>
<text user-select>{
    
    {
    
     message }}</text>
<text user-select="{
    
    {true}}">{
    
    {
    
     message }}</text>
<text decode>&gt;</text>

Page({
    
    
  data:{
    
    
    title:"七龙珠",
    name:"孙悟空"
  },
  getUserInfo(event) {
    
    
    // console.log(event);
    // 调用API, 获取用户的信息
    // 1.早期小程序的API, 基本都是不支持Promise风格
      // 2.后期小程序的API, 基本都开发支持Promise风格
    wx.getUserProfile({
    
    
      desc: 'desc',
      // 1.早期小程序的API, 基本都是不支持Promise风格
      // success: (res) => {
    
    
      //   console.log(res);
      // }
      // 2.后期小程序的API, 基本都开发支持Promise风格
    }).then(res => {
    
    
      console.log(res);
    })
  },
  getPhoneNumber(event) {
    
    
    console.log(event);
  },
})

12_(掌握)常见组件-View组件的使用

  onViewClick() {
    
    
    console.log("onViewClick");
  },
      
<view>------------------ View组件 ------------------</view>
<view bindtap="onViewClick" hover-class="active">我是view组件</view>
<view>哈哈哈</view>

13_(掌握)常见组件-Image组件的使用

https://developers.weixin.qq.com/miniprogram/dev/component/image.html

<view>------------------ Image组件 ------------------</view>
<!-- 根目录: /表示根目录 -->
<!-- 1.图片的基本使用 -->
<!-- image元素宽度和高度: 320x240 -->
<!-- <image src="/assets/zznh.png"/>
<image src="https://pic3.zhimg.com/v2-9be23000490896a1bfc1df70df50ae32_b.jpg"/> -->

<!-- 2.图片重要的属性: mode -->
<!-- <image src="/assets/zznh.png" mode="aspectFit"/> -->
<!-- image基本都是设置widthFix -->
<!-- <image src="/assets/zznh.png" mode="widthFix"/> -->
<!-- <image src="/assets/zznh.png" mode="heightFix"/> -->

14_(掌握)常见组件-Image组件的选择本地图片

https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html

<!-- 3.选择本地图片: 将本地图片使用image展示出来 -->
<button bindtap="onChooseImage">选择图片</button>
<image class="img" src="{
    
    {chooseImageUrl}}" mode="widthFix"/>
    
    
data:{
    
     
	chooseImageUrl: "",
  },
onChooseImage(){
    
    
    wx.chooseMedia({
    
    
      mediaType:"image"
    }).then(res =>{
    
    
      console.log(res);
      const imagePath = res.tempFiles[0].tempFilePath                 
      this.setData({
    
    chooseImageUrl:imagePath})
    })
  }

15_(掌握)常见组件-scroll-view的使用

data:{
    
    
	viewColors: ["red", "blue", "green", "skyblue", "purple", "yellow"]
}

<view>------------------ scroll-view组件 ------------------</view>
<!-- 上下滚动(y轴)  滚动大小的内容需要大于滚动内容的高度（必须有固定的高度）才能实现 -->
<!-- <scroll-view class="container scroll-y" scroll-y>
  <block wx:for="{
    
    {viewColors}}" wx:key="*this">
    <view class="item" style="background: {
    
    {item}};">{
    
    {
    
    item}}</view>
  </block>
</scroll-view> -->

<!-- 左右滚动(x轴)  滚动大小的内容需要大于滚动内容的宽度（必须有固定的宽度）才能实现 -->
<!-- <scroll-view 
  class="container scroll-x" 
  scroll-x
  enable-flex
>
  <block wx:for="{
    
    {viewColors}}" wx:key="*this">
    <view class="item" style="background: {
    
    {item}};">{
    
    {
    
    item}}</view>
  </block>
</scroll-view> -->

16_(掌握)常见组件-scroll-view滚动监听

   // 监听scroll-view滚动
   onScrollToUpper() {
    
    
    console.log("滚动到最顶部/左边");
  },
  onScrollToLower() {
    
    
    console.log("滚到到最底部/右边");
  },
  onScroll(event) {
    
    
    console.log("scrollview发生了滚动:", event);
  }

<!-- 监听事件 -->
<scroll-view 
  class="container scroll-x" 
  scroll-x
  enable-flex
  bindscrolltoupper="onScrollToUpper"
  bindscrolltolower="onScrollToLower"
  bindscroll="onScroll"
>
  <block wx:for="{
    
    {viewColors}}" wx:key="*this">
    <view class="item" style="background: {
    
    {item}};">{
    
    {
    
    item}}</view>
  </block>
</scroll-view>

17_(掌握)组件共同属性和input的双向绑定

<view>------------------ input组件 ------------------</view>
<!-- 新增语法双向绑定 model:value="{
    
    {message}}" -->
<input type="text" model:value="{
    
    {message}}" bindinput="fakeCallback"/>
    
//光用model就可以实现双向绑定，但是会有warning，加一个没用的回调函数
  fakeCallback(){
    
    }

坑

1.光用model就可以实现双向绑定，但是会有warning，加一个没用的回调函数*

//光用model就可以实现双向绑定，但是会有warning，加一个没用的回调函数
// 哎,真发愁
fakeCallback(){
    
    }

<input model:value="{
    
    {number}}" type="number" bindinput="fakeCallback"/>

18_(理解)wxss-样式的编写方式和支持的选择器

<!-- 1.样式的编写方式 -->
<!-- 1.1.应用全局样式 app.wxss -->
<view class="title">learn wxss title</view>

<!-- 1.2.页面中的样式 index.wxss-->
<view class="message">learn wxss message</view>

<!-- 1.3.行内的样式 -->
<view style="color: blue;">inline style</view>

19_(掌握)wxss-自适应的单位使用-rpx单位

开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

<!-- 2.rpx单位的使用 -->
<view class="item">
  我是文本
</view>

/* 设置item的宽度和高度 */
.item {
    
    
  font-size: 32rpx;
  /* iphone6: 1px === 2rpx */
  width: 200rpx;
  height: 200rpx;
  background-color: #f00;
}

20_(理解)内容回顾和作业布置

第二章：内容回顾

一. 注册App和注册Page

1.1. 注册App

App({})

1.1.1. 判断进入场景

onLaunch
onShow
- options
  - scene属性

1.1.2. 全局共享数据

globalData
页面:

const app = getApp()
app.globalData.xxx

1.1.3. 页面启动操作

登录操作
将数据保存Storage中
下次重启可以从Storage读取数据
保存到globalData中

1.2. 注册Page

1.2.1. 网络请求-拿到数据

网络请求
获取数据 - 保存data
在wxml中使用swiper-swiper-item进行展示

1.2.2. 在data中初始化数据

1.2.3. wxml事件绑定函数

1.2.4. 绑定其他事件

下拉刷新
达到底部
页面滚动

二. 常见的内置组件

2.1. text组件

2.2. button组件

2.2.1. button常见属性

2.2.2. open-type

getUserProfile

2.3. view组件

2.4. image组件

mode属性:
- widthFix
wx.chooseMedia: 选择相册中图片

2.5. scroll-view

滚动的前提:
- 固定的宽度或者高度
- 内容需要超出宽度或者高度
- 设置scroll-x或scroll-y
滚动的监听
- 滚动到左边
- 滚动到右边
- 滚动的过程

2.6. 组件共有属性

id/class/style
hidden
data-*
bind/catch

2.7. input双向绑定

三. wxss编写样式

3.1. 编写方式

全局样式
页内样式
行内样式