【微信小程序】微信小程序入门与实战小项目笔记

笔记

一、初识微信小程序

微信开发工具下载地址

1. 如何申请小程序AppID(小程序ID)

1. 没有注册的先通过该地址注册账号
2. 前往微信公众平台查看，在开发菜单下的开发设置即可查看

2. 开发工具的基本设置

打开开发工具后先调整设置为下图所示

3. 小程序的基本单位-Page页面

可以在app.json文件的pages属性配置页面路径，理论上可以在任意路径存放页面文件，但是推荐放在pages目录下

---

二、小程序的基本目录

1. 页面的4种基本文件类型

.wxml: 类似与html，用于支撑页面的骨架

.wxss：类似与css，用于美化页面的样式

.js：处理业务逻辑

.json：对页面进行配置

页面目录下面的文件名需要保持一致，无需引入

2. 全局配置文件、全局样式和应用程序级别js文件

用于小程序的全局配置，相当于初始化，各个页面内可以单独配置覆盖全局配置

---

三、rpx响应式单位与flex布局

1. 小程序默认显示第一位的页面索引或entryPagePath

{
  "pages": [
    "pages/index/index",
    "pages/welcome/welcome"
  ]
}

2. 图片、文字与按钮标签

斜线代表根目录，绝对路径

image组件有一默认的宽高：宽度320px、高度240px

使用text标签的时候写成一行

<image></image>
<text></text>
<button></button>

3. rpx的特点

根据用户屏幕大小动态调整尺寸

iPhone6： 1px = 2rpx

4. 可以在page标签直接设置小程序的背景色

page{
  background-color: #b3d4db;
}

---

四、阅读列表与详情页

1.下载安装linUI

npm init
npm i lin-ui@0.8.7

安装好之后需要在 工具->构建npm

2. 使用自定义组件

json文件内先配置引入使用的组件

{
  "usingComponents": {
    "l-avatar": "/miniprogram_npm/lin-ui/avatar/index"
  }
}

<l-avatar></l-avatar>

3. swiper组件的使用

容器组件内可滑动的不只是图片，也可以是文本等其他内容

swiper组件内只能使用swiper-item组件（子组件）

 <swiper class="swiper">
    <swiper-item>
      <image src="/images/69317501_p0.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/70682785_p0.png"></image>
    </swiper-item>
  </swiper>

需要给swiper标签以及image标签都加上宽高属性

.swiper, .swiper image{
  height: 460rpx;
  width: 100%;
}

属性	描述	默认
indicator-dots	是否显示面板指示点	false
autoplay	是否自动切换	false
vertical	滑动方向是否为纵向	false

详情可查阅官方文档

与Vue的不同之处：小程序标签里面的属性需要加双括号才表示变量，与React类似

4. 使用LinUI的icon字体图标

在json文件引入icon组件

加上name直接使用

<l-icon name="cart"></l-icon>

参数	说明	类型	可选值	默认值
name	图标的名称，必填	String	-	-
color	图标的颜色	String	-	默认为主题色
size	图标的大小（单位：rpx）	Number	-	40rpx

5. 单向数据与双向数据

单向数据：一旦数据变化，就去更新页面(data-页面)，但是没有(页面-data)

双向数据：数据变化，可以(data-页面)，也可以(页面-data)

6. 数据绑定

通过setData方法修改data的数据，不能直接赋值，与Vue不同，与React类似

this.setData({
	a: '1',
  b: '2'
})
// 需要修改对象数组里面的属性时
let data = 'week[' + n + '].is_sign'
 that.setData({
   [data]: 1
 })

7. 页面生命周期

生命周期钩子函数	触发时机
onLoad	监听页面加载
onShow	监听页面显示
onReady	监听页面初次渲染完成
onHide	监听页面隐藏
onUnload	监听页面卸载

页面初次打开执行顺序：onload =》onShow =》onReady

8. Mustache语法

与Vue的基本一致

动态属性也需要加双括号，与React类似

9. 条件渲染

wx:if => 相当于 v-if

wx:else => 相当于v-else

10. 列表渲染

wx:for => 相当于v-for

wx:key => 相当于:key

wx:key需要为对象中的的 属性名 或是 index ，不需要双括号

循环渲染多个平级子元素的时候可配合<block>标签使用，该标签不会被渲染到页面，相当于Vue中的<template>

默认情况下item表示数组的子元素，index表示数组索引

可通过wx:for-item修改默认子元素表示，通过wx:for-index修改默认索引

11. 小程序事件

bind:tap：触摸事件（最好用冒号隔开写，提高可读性）

//触摸事件
bind:tap              //具有 事件冒泡 
catch:tap						 //阻止 事件冒泡
capture-bind:tap      //具有 事件捕获
capture-catch:tap     //阻止 事件捕获，在内部嵌套的元素永远无法触发对应的事件处理函数
mut-bind:tap          //具有 互斥效果，即"有我没你"的感觉，一个 mut-bind 触发后，如果事件冒泡到其他节点上，其他节点上的 mut-bind 绑定函数不会被触发，但 bind 绑定函数和 catch 绑定函数依旧会被触发。

12. 小程序跳转

1. wx.switchTab(Object object)

​ 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wx.switchTab({
	url: '/pages/search/search',
})

​ 2)wx.reLaunch(Object object)

​ 关闭所有页面，打开应用内的某一个页面

 wx.reLaunch({
 	url: '/pages/list/list?id=1&name=zhangsan',
 })

onLoad: function (options) {
	console.log("list-id",options)
},

3）wx.redirectTo(Object object)

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

wx.redirectTo({
	url:"/pages/list/list?id=1"
})

4）wx.navigateTo(Object object)

​ 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层

wx.navigateTo({
	url: '/pages/list/list?id=1',
})

5）wx.navigateBack(Object object)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，
// 而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
wx.navigateTo({
  url: 'B?id=1'
})

// 此处是B页面
wx.navigateTo({
  url: 'C?id=1'
})

// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({
  delta: 2  // A=>B=>C  现在从c直接到a，那么就写个2，默认是1，只能返回B
})

13. 自定义属性

设置：data-xx

获取：event.currentTarget.dataset.xx

注意：

1. data-post-id => dataset.postId
2. event.targrt：触发事件的源组件； event.currentTarget：事件绑定的当前组件

14. 小程序的全局变量

app.js

App({
	test: 1
})

通过getApp()可获取全局变量

const app = getApp()
console.log(app.test) // 1

15. 小程序缓存

相当于localstorage

同步操作

wx.setStorageSync('key', 'value')  	// 设置
wx.removeStorageSync('key') 		 	  // 删除
wx.clearStorageSync()            	  // 清空
wx.getStorageSync('key')            // 获取

异步操作

wx.getStorage({
   key: 'a',
   success(res){
     console.log('res', res.data);
   }
 })

异步操作已经封装成了了Promise，可以直接通过.then或者async/await调用

16. 小程序api

wx.showToast 轻提示

wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})

wx.showModal模态对话框

wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success (res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

wx.showActionSheet显示操作菜单

wx.showActionSheet({
  itemList: ['A', 'B', 'C'],
  success (res) {
    console.log(res.tapIndex)
  },
  fail (res) {
    console.log(res.errMsg)
  }
})

更多其他api请查看文档

17. 音乐播放api

const mgr = wx.getBackgroundAudioManager() // 创建背景音乐播放实例
mgr.src = this.data.postData.music.url
mgr.title = this.data.postData.music.title // 必须要设置标题，不然音乐播放不了

当设置了新的 src 时，会自动开始播放，持的格式有 m4a, aac, mp3, wav

// 若需要小程序在退到后台后继续播放音频，需要在 app.json 中配置 requiredBackgroundModes 属性
"requiredBackgroundModes": ["audio"],

音乐播放事件监听

// 判断当前音乐是否正在播放
currentMusicIsPlaying() {
  if (app.gIsPlayingMusic && (app.gIsPlayingPostId == this.data.pid)) {
    return true
  }
  return false
},

mgr.onPlay(() => {
   app.gIsPlayingMusic = true
    this.setData({
      isPlaying: this.currentMusicIsPlaying()
    })
}) 			// 监听开始播放
mgr.onPause(() => {
   app.gIsPlayingMusic = false
    this.setData({
      isPlaying: this.currentMusicIsPlaying()
    })
}) 		// 监听暂停播放

通过app.js独立管理每个页面的音乐

gIsPlayingMusic: false, // 是否正在播放音乐
gIsPlayingPostId: -1,   // 哪篇文章正在播放音乐

---

五、小程序tabar的基本配置

"tabBar":{  //配置底部的tab栏
    "color":"#ccc",  //默认的颜色
    "selectedColor":"#35495e",  //选中tabar的文字颜色
    "borderStyle":"white",      //tabbar的上边框线  white 默认是black
    "backgroundColor":"#f9f9f9", //tabbar的背景色
    "list":[ //数组 规定了2-5
      {
        "text": "榜单",  //tabbar的文字
        "pagePath":"pages/board/board", //tabbar的页面路径
        "iconPath":"images/board.png",  //tabbar的icon图标
        "selectedIconPath":"images/board-actived.png" //tabbar当前选中的图标
      }
    ]
  }

注意：pagePath路径不需要在首部加上/

---

六、自定义组件

1. 引入自定义组件

{
  "usingComponents": {
    "l-icon": "/miniprogram_npm/lin-ui/icon/index",
    "post": "/components/post/index"
  }
}

2. 自定义组件属性使用

与Vue类似

pages/posts/posts.html

<post text="777"></post>

components/post/index.js

properties: {
  // text: String
    text: {
      type: String,
      value: '123'
    }
  },

3. 在自定义组件在添加样式失效问题（当容器设置为flex布局的时候，样式就可以生效）

通过使用外部样式类解决，

父

  <movie-list m-class="movie-list"></movie-list>

.movie-list{
  margin-bottom: 30rpx; // 样式与子组件冲突的时候可能会不生效，就是用!important
}

子

<view class="container m-class">
  <text>正在热映</text>
</view>

Component({
  externalClasses: ['m-class'],
})

4. 自定义事件

绑定自定义事件

父

<post bind:eventName="toDetail" res="{{item}}"></post>

toDetail(event){
  console.log(event.detail.test)
}

在组件内触发

子

this.triggerEvent('eventName', {
  test: 1
}) // 类似于Vue中的 this.$emit()

---

七、访问服务器数据

1. 请求方法的基本使用

 wx.request({	// 该方法没有返回promise对象，不能使用then，async/await
      url, // 地址
      data, // 参数
      success: (res) => { // 请求成功回调函数
        this.setData({
          data: res.data.subjects
        })
      }
    })

2. justify-content：space-between； 解决最后一排数量不够自动向两端排列问题

可以通过:after解决，只适合每列有3个的分布情况

.tem-flex:after{
    content: '';
    width: 200rpx; /* 一项数据的宽度 */
  }

其他解决方案点击这里查看

3. 上滑加载更多数据

通过onReachBottom钩子函数可以监听

onReachBottom: async function () {
    let queryObj = {
      start: this.data.movies.length,
      count: 12
    }
    let res = await this.requestData(this.data._type, queryObj)
    this.setData({
      movies: this.data.movies.concat(res.data.subjects)
    })
  },

4. 下拉刷新

在json文件里面配置，开启允许下拉

"enablePullDownRefresh": true

通过onPullDownRefresh钩子函数可以监听

onPullDownRefresh: async function () {
    let queryObj = {
      start: 0,
      count: 12
    }
    let res = await this.requestData(this.data._type, queryObj)
    wx.stopPullDownRefresh()
    this.setData({
      movies: res.data.subjects
    })
  },

5. 配置标题

静态配置

在json文件可配置

 "navigationBarTitleText": "Top250"

动态设置

最好在onReady钩子函数设置

onReady: function () {
    let title = ''
    switch (this.data._type) {
      case 'in_theaters':
        title = '正在热映'
        break;
      case 'coming_soon':
        title = '即将上映'
        break;
      default:
        title = '电影'
        break;
    }
    wx.setNavigationBarTitle({
      title
    })
  },

---

八、电影详情页

1. 图片预览

  wx.previewImage({
    urls: []
  })

2. 图片的多种mode模式

 <image src="{{movie.images.large}}" mode="aspectFill"></image>

详情可查询官方文档

3. Scroll-View组件的使用

enable-flex：允许使用flex

scroll-x：横向滚动

<scroll-view  class="casts-container" enable-flex scroll-x>
  <block wx:for="{{movie.castsInfo}}" wx:key="index">
    <view class="cast-container">
      <image class="cast-img" src="{{item.img}}"></image>
      <text>{{item.name}}</text>
    </view>
  </block>
</scroll-view>

.casts-container{
  display: flex;
  margin-bottom: 50rpx;
  height: 300rpx; // 纵向出现很大高度时，需要设置
}