Chapter 2: Register App and Page-Common built-in components-wxss style
01_(Master) Register Mini Program App Instance-App Function Call
// 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_(Master) Registration Mini Program - Determine the entry scene and life cycle
App({
onLaunch(options){
console.log(options);
},
onShow(options){
console.log("onShow:",options);
},
onHide(){
console.log("onHide");
}
})
03_(Master) Registration Mini Program-App data sharing and page acquisition
globalData data is not responsive, the data shared here is usually some fixed data
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_(Master) Registration applet-login operation and storage access data
// 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_(Master) Knowledge Points-Adjustment of Code Component Method
1. To obtain item, you need to customize attributes in wxml. The built-in custom attribute data-item="{ { item}}" is to add the attribute data-item="{ { item}}" to the click event.
Here you can just keep it with wxml const item = event.target.dataset.aaa wxml == data-aaa="{ {item}}"
Each button is a jump to a path knowledge point
// 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_(Master) Registration Page Page-Page Loading-Request Data Display Data
pit
1. The WeChat developer tool cannot be pinned to the taskbar and will fail to start.
2. WeChat applet [sitemap index status prompt] According to the rules of sitemap [0], the current page [pages/index/index]
project.config.json
{
"setting": {
"checkSiteMap":false,
}
}
3. When making network requests, remember not to verify requests for legal domain names.
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_(Master) Registration page-initialization data and event monitoring
08_(Understanding) Registration Page - Analysis of the Life Cycle Function of the Page
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");
}
})
Chapter 2: Afternoon: Common built-in components of mini programs
09_(Master) the use of common components-Text component
<!-- text组件 -->
<text> Hellow World</text>
<text user-select>{
{
message}}</text>
<!-- 写上属性就是true，不写就是false -->
<text user-select="{
{true}}">{
{
name}}</text>
<text decode>></text>
10_(Master) the use of common components-Button components
<!-- 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_(Master) Common components-open-type of Button component
<!--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>></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_(Master) the use of common components-View components
onViewClick() {
console.log("onViewClick");
},
<view>------------------ View组件 ------------------</view>
<view bindtap="onViewClick" hover-class="active">我是view组件</view>
<view>哈哈哈</view>
13_(Master) the use of common components-Image components
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_(Master) Common components-Select local pictures of Image components
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_(Master) the use of common components-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_(Master) Common components-scroll-view scrolling monitoring
// 监听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_(Master) Two-way binding of common attributes of components and input
<view>------------------ input组件 ------------------</view>
<!-- 新增语法双向绑定 model:value="{
{message}}" -->
<input type="text" model:value="{
{message}}" bindinput="fakeCallback"/>
//光用model就可以实现双向绑定，但是会有warning，加一个没用的回调函数
fakeCallback(){
}
pit
1. Two-way binding can be achieved using model alone, but there will be a warning and a useless callback function*
//光用model就可以实现双向绑定，但是会有warning，加一个没用的回调函数
// 哎,真发愁
fakeCallback(){
}
<input model:value="{
{number}}" type="number" bindinput="fakeCallback"/>
18_(Understanding) wxss-style writing method and supported selectors
<!-- 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_(master)wxss-adaptive unit usage-rpx units
When developing WeChat mini programs, designers can use iPhone6 as the standard for visual drafts.
<!-- 2.rpx单位的使用 -->
<view class="item">
我是文本
</view>
/* 设置item的宽度和高度 */
.item {
font-size: 32rpx;
/* iphone6: 1px === 2rpx */
width: 200rpx;
height: 200rpx;
background-color: #f00;
}
20_(Comprehension) Content Review and Assignment
Chapter 2: Content Review
1. Register App and Register Page
1.1. Register App
- App({})
1.1.1. Determine entering the scene
- onLaunch
- onShow
- options
- scene attribute
- options
1.1.2. Global shared data
- globalData
- page:
const app = getApp()
app.globalData.xxx
1.1.3. Page startup operation
- Login operation
- Save data in Storage
- Data can be read from Storage the next time you restart
- Save to globalData
1.2. Register Page
1.2.1. Network request-get data
- network request
- Get data - save data
- Use swiper-swiper-item for display in wxml
1.2.2. Initialize data in data
1.2.3. wxml event binding function
1.2.4. Binding other events
- Pull down to refresh
- reach bottom
- Page scrolling
2. Common built-in components
2.1. text component
2.2. button component
2.2.1. Common attributes of button
2.2.2. open-type
- getUserProfile
2.3. view component
2.4. image component
- mode attribute:
- widthFix
- wx.chooseMedia: Select pictures in the album
2.5. scroll-view
- Prerequisites for scrolling:
- fixed width or height
- Content needs to exceed width or height
- Set scroll-x or scroll-y
- Scroll monitoring
- scroll to left
- scroll to right
- rolling process
2.6. Common properties of components
- id/class/style
- hidden
- data-*
- bind/catch
2.7. Input two-way binding
3. wxss writing style
3.1. Writing method
- global style
- In-page style
- inline styles