前端学习篇 -- 小程序学习

1、基础

微信⼩程序，简称⼩程序，英⽂名 Mini Program ，是⼀种不需要下载安装即可使⽤的应⽤，它实现了应⽤“触⼿可及”的梦想，⽤⼾扫⼀扫或搜⼀下即可打开应⽤

1.1 环境准备

1.1.1 注册账号

使用全新的邮箱，没有注册过其他小程序或者公众号的，访问注册页面

1.1.2 获取APPID

调⽤微信⼩程序的接⼝等功能，需要索取开发者的⼩程序中的 APPID ，所以在注册成功后可登录，然后获取APPID

首页菜单栏 >> 开发 >> 开发设置 >> 获取

1.1.3 开发者工具

下载地址

微信⼩程序⾃带开发者⼯具，集开发预览调试发布于⼀⾝的完整环境
但是由于编码的体验不算好，因此建议使⽤ vs code + 微信小程序编辑工具来实现编码
vs code 负责敲代码，微信编辑工具负责预览

1.2 开发者工具介绍

官网

1.3 目录结构

1.3.1 ⼩程序⽂件结构和传统web对⽐

	传统web	微信⼩程序
结构	HTML	WXML
样式	CSS	WXSS
逻辑	JavaScript	JavaScript
配置	⽆	JSON

传统web 是三层结构，⽽微信⼩程序是四层结构，多了⼀层配置.json

1.3.2 基本的项⽬⽬录

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XPcHWv5x-1602401913860)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1598758212076.png)]

1.3.3 配置文件

app.json

用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等

页面配置.json

页面中配置项会覆盖 app.json 的 window 中相同的配置项

sitemap 配置

用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引

pages 字段

⽤于描述当前⼩程序所有⻚⾯路径

window 字段

定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等

tabBar 字段

底部 tab 栏的表现，相当于路由功能

2、语法

2.1 数据绑定

2.1.1 普通写法

<view> {
   
   { message }} </view>

Page({
    
    
  data: {
    
    
    message: 'Hello MINA!'
  }
})

2.1.2 自定义属性

<view data-id="{
     
     { id }}"> </view>

Page({
  data: {
    id: 0
  }
})

2.1.3 Boolean 属性

<view wx:if="{
     
     { isShow }}">我的页面</view>
<checkbox checked="{
     
     { isShow }}"> </checkbox>

Page({
    
    
  data: {
    
    
    isShow: true
  }
})

2.2 运算

2.2.1 三元运算

true隐藏，false显示

<view hidden="{
     
     {1 > 2 ? true : false}}"> Hidden </view>

2.2.2 算数运算

<view> {
   
   {a + b}} + {
   
   {c}} + d </view>

Page({
    
    
  data: {
    
    
    a: 1,
    b: 2,
    c: 3
  }
})

view中的内容为 3 + 3 + d

2.2.3 字符串运算

<view>{
   
   {"hello" + name}}</view>

Page({
    
    
  data:{
    
    
    name: 'MINA'
  }
})

view中的内容为helloMINA

2.3 列表渲染

2.3.1 wx:for

项的变量名默认为 item，wx:for-item可以指定数组当前元素的变量名
下标变量名默认为 index，wx:for-index可以指定数组当前下标的变量名
wx:key ⽤来提⾼数组渲染的性能，唯一值
- *this在for循环中代表item本身

<view wx:for="{
     
     {array}}" wx:key="id">
  {
   
   {index}}:{
   
   {item.message}}
</view>

Page({
    
    
  data: {
    
    
    array: [{
    
    
      id:0,
      message: 'foo',
    }, {
    
    
      id:1,
      message: 'bar'
    }]
  }
})

0:foo

1:bar

2.3.2 block 标签

渲染⼀个包含多节点的结构块，block最终不会变成真正的dom元素

<block wx:for="{
     
     {[1, 2, 3]}}" wx:key="*this" >
  <view> {
   
   {index}}:{
   
   {item}}</view>
</block>

2.3.3 条件渲染

`wx:if`

是否需要渲染该代码块，true渲染，false不渲染

<view wx:if="{
     
     {false}}">1</view>
<view wx:elif="{
     
     {true}}">2</view>
<view wx:else>3</view>

`hidden`

通过添加样式的方式来切换显示，true隐藏，false显示

应用场景

当标签不是频繁的切换显示优先使用 wx:if，直接把标签从页面结构给移除掉
当标签频繁的切换显示的时候优先使用 hidden，通过添加样式的方式来切换显示
- 注意：hidden 属性不要和样式display一起使用

2.4 事件绑定

⼩程序中绑定事件，通过bind关键字来实现。如 bindtap、 bindinput 、bindchange 等

2.4.1 双向绑定

<input type="text" bindinput="handleInput" />
<view>{
   
   { num }}</view>

data: {
    
    
  num: 0
},
handleInput(e) {
    
    
  this.setData({
    
    
    num: e.detail.value
  })
}

2.4.2 点击事件 `bindtap`

<button bindtap="handletap" data-operation="{
     
     {1}}">+</button>
<button bindtap="handletap" data-operation="{
     
     {-1}}">-</button>

data: {
    
    
  num: 0
},
handletap(e) {
    
    
  const {
    
     operation } = e.currentTarget.dataset
  this.setData({
    
    
    num: this.data.num + operation
  })
}

2.5 样式

2.5.1 尺寸单位 `rpx`

可以根据屏幕宽度进⾏⾃适应，规定屏幕宽为750rpx

使⽤步骤：

确定设计稿宽度 pageWidth
计算⽐例750rpx = pageWidth px ，因此1px=750rpx/pageWidth

2.5.2 样式导入

使⽤ @import 语句可以导⼊外联样式表，只⽀持相对路径

/** common.wxss **/
.small-p {
    
    
  padding:5px; 
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
    
    
  padding:15px; 
}

2.5.3 选择器

⼩程序不⽀持通配符*，因此以下代码⽆效！

* {
    
    
  margin: 0;
  padding: 0;
  box-sizing: border-box; 
}

2.5.4 使用 less

原⽣⼩程序不⽀持 less ，其他基于⼩程序的框架⼤体都⽀持，如 wepy ， mpvue， taro 等。

 "less.compile": {
    
    
    "outExt": ".wxss"
 }

2.6 组件

2.6.1 view

代替原来的 div 标签，详情参考view

2.6.2 text

文本标签

只能嵌套文本
⻓按⽂字可以复制（只有该标签有这个功能）
可以对空格回⻋进⾏编码

属性值

user-select：文本是否可选，默认false

decode：是否解码，默认false

2.6.3 image 标签

默认宽度320px、⾼度240px

小程序打包后大小不能超过2M，所以图片资源都要放到网络上

图⽚标签，image组件默认宽度320px、⾼度240px
⽀持懒加载

属性值

src：图片资源地址

mode：图片裁剪、缩放的模式，默认scaleToFill

lazy-load：图片懒加载，默认false

详情参考

2.6.4 swiper

默认宽度 100% ⾼度 150px

微信内置轮播图组件，只可放置swiper-item组件，否则会导致未定义的行为

详情参考

2.6.5 navigator

相当于a标签，但是它是块级元素

属性值

url：当前小程序内的跳转链接

<navigator url="/pages/search/index" hover-class="none" >搜索</navigator>

target：在哪个目标上发生跳转，默认当前小程序

open-type：跳转方式

详情参考

2.6.6 rich-text

富文本标签，类似 vue中 v-html 功能

属性值

nodes：节点列表/HTML String

详情参考

2.6.7 icon

字体图标

属性值

type： icon的类型

size： icon的大小

color： icon的颜色，同css的color

详情参考

2.6.8 radio

单选框，需要搭配父元素radio-group⼀起使⽤

属性值

value： radio 标识

checked：当前是否选中

disabled：是否禁用

color： radio的颜色，同css的color

<radio-group bindchange="handleChange">
  <radio color="red" value="male">男</radio>
  <radio color="red" value="female">女</radio>
</radio-group>
<view>
  您选中的是:{
   
   {gender}}
</view>

data: {
    
    
  gender: ''
},
handleChange(e) {
    
    
  this.setData({
    
    
    gender: e.detail.value
  })
},

2.6.9 checkbox

复选框，搭配父元素checkbox-group⼀起使⽤

属性值同radio一样，详情参考

2.6.10 自定义组件

1.使用组件

components文件夹下创建组件，组件.json文件设置

{
      
      
  "component": true,
  "usingComponents": {
      
      }
}

任意文件使用组件，页面.json文件配置

{
  "usingComponents": {
  组件名：组件路径
    "Tabs":"../../components/Tabs/Tabs"
  }
}

<Tabs />

2.父子组件传值

父向子传值，通过标签属性传值

<!-- 父组件 -->
<Tabs list="{
       
       {list}}" />

// 父组件
data: {
      
      
  list: [
    {
      
      
      id: 0,
      name: '首页',
      isActive: true
    },
    {
      
      
      id: 1,
      name: '原创',
      isActive: false
    }
  ]
}

子组件接收

// 子组件
properties: {
      
      
  list: {
      
      
    type: Array,
    value() {
      
      
      return []
    }
  }
}

子向父传递传递数据，通过自定义事件

// 子组件
this.triggerEvent('itemChange',{
      
       index })

<!-- 父组件 -->
<Tabs list="{
       
       {list}}" binditemChange="itemChange" />

// 父组件
itemChange(e){
      
      
  console.log(e)
}

3.`slot`

插槽

<view class="tabs_content">
  <slot></slot>
</view>

2.7 生命周期

2.7.1 应用生命周期

onLaunch：监听⼩程序初始化，应用第一次启动触发，一般用于获取用户授权

onShow：监听小程序启动或切前台，应用被用户看到或从后台切到前台触发

onHide：监听⼩程序切后台，应用隐藏时触发

onError：错误监听函数，应用报错时触发，手机用户的错误信息，下一版本升级时修复

onPageNotFound：页面不存在监听函数，当页面请求不存在是，重定向一个页面

详情参考

2.7.2 页面生命周期

onLoad：页面加载时触发，一般用于异步请求来初始化页面数据
- 有一个opations参数，用来接收其他页面传递过来的参数
```
onLoad(options) {
        
        
  console.log(options)
} 
```
onShow：监听页面显示
- 不同于onLoad，无法在形参上接收options参数，需要用到这种方法：
```
// 1.获取小程序的页面栈-数组，长度最大是10个页面
let 
```
onReady：页面初次渲染完成时触发
onHide：监听页面隐藏
onUnload：页面卸载时触发，可通过超链接的open-type ="redirect"演示
onPullDownRefresh：监听用户下拉动作，一般用于刷新
- 在页面 json 文件中开启下拉刷新，并配置loadinng样式
```
"enablePullDownRefresh": true,
"backgroundTextStyle": "dark"
```
onReachBottom：页面上拉触底事件的处理函数，一般用于加载下一页数据
onShareAppMessage：点击右上角分享触发
onPageScroll：页面滚动就可以触发

onResize：发生了横屏竖屏切换的时候触发

// 在需要发生横屏的的页面 json 文件配置
{
      
      
  "pageOrientation": "auto"
}

onTabItemTap：必须要求当前页面是tabbar页面，点击的自己的tab item的时候才触发

详情参考

2.7.3 组件生命周期

created：组件实例刚刚被创建时执行，注意此时不能调用 setData
attached：组件实例进入页面节点树时执行
ready：组件布局完成后执行
moved：组件实例被移动到节点树另一个位置时执行
detached：组件实例被从页面节点树移除时执行

3、API

3.1 wx.request 网络请求

需要在小程序后台配置请求域名，否则会报错

属性值

url：接口地址

data：请求的参数

header：请求头

method： HTTP 请求方法，默认 GET

timeout：超时时间，单位为毫秒

dataType：返回的数据格式，默认json

responseType：响应的数据类型，默认text

success：成功回调

fail：失败回调

complete：调用成功、失败都会执行

3.2 数据缓存

3.2.1 `wx.setStorageSync`

将数据存储在本地缓存中指定的 key 中，除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用

wx.setStorageSync('cates', {
    
    
  time: Date.now(),
  data: this.Cates
})

3.2.2 `wx.getStorageSync`

从本地缓存中异步获取指定 key 的内容

const Cates = wx.getStorageSync('cates')

3.2.3 `wx.removeStorageSync`

从本地缓存中移除指定 key

wx.removeStorageSync({
    
    
  key: 'cates'
})

3.2.4 `wx.clearStorageSync`

清理本地数据缓存

wx.clearStorage()

3.3 界面交互

3.3.1 `wx.showToast`

显示消息提示框

title：提示的内容

wx.showLoading 和 wx.showToast 同时只能显示一个
wx.showToast 应与 wx.hideToast 配对使用

3.3.2 `wx.showLoading`

显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框

wx.showLoading({
    
    
  title: '加载中',
  mask: true //显示透明蒙层，防止触摸穿透
})

setTimeout(function () {
    
    
  wx.hideLoading()
}, 2000)

3.3.3 下拉刷新

停止当前页面下拉刷新

wx.stopPullDownRefresh()

开始下拉刷新

wx.startPullDownRefresh()

3.3.4 wx.showModal

显示模态对话框

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

3.4 媒体

3.4.1 `wx.previewImage`

在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作

wx.previewImage({
    
    
  current: '', // 当前显示图片的http链接
  urls: [] // 需要预览的图片http链接列表
})

3.4.2 wx.chooseImage

从本地相册选择图片或使用相机拍照

wx.chooseImage({
    
    
  // 最多9张
  count: 9,
  // 可以使用原图、压缩图
  sizeType: ['original', 'compressed'],
  // 可以从相册选图、拍照上传
  sourceType: ['album', 'camera'],
  success: (result) => {
    
    
    this.setData({
    
    
      chooseImgs: [...this.data.chooseImgs, ...result.tempFilePaths]
    })
  }
})

3.5 开发

3.5.1 wx.chooseAddress

获取用户收货地址。调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址

wx.chooseAddress({
    
    
  success: (result) => {
    
    
    // 接口调用成功的回调函数
  },
  fail: () => {
    
    },
  complete: () => {
    
    }
})

用户只要拒绝过授予权限就不能再次获取位置信息

3.5.2 wx.getSetting

获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限

wx.getSetting({
    
    
  success: (result) => {
    
    
    console.log(result);
  },
  fail: () => {
    
    },
  complete: () => {
    
    }
})

// 如果取得授权,result.authSetting["scope.address"] = true

// 如果拒绝授权,result.authSetting["scope.address"] = false

// 还未授权,result.authSetting["scope.address"] = undefined

3.5.3 wx.openSetting

重新设置用户权限

3.6 路由

3.6.1 wx.navigateTo

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面

wx.navigateTo({
    
    
  // 跳转到授权页面
  url: '/pages/auth/index'
})

3.6.2 wx.navigateBack

关闭当前页面，返回上一页面或多级页面

wx.navigateBack({
    
    
  delta: 1
})

3.7 开放接口

3.7.1 wx.login

调用接口获取登录凭证（code）

4、`async`语法配置

在⼩程序的开发⼯具中，勾选 ES6转ES5语法
下载facebook的regenerator库中的runtime.js
在⼩程序⽬录下新建⽂件夹 lib/runtime/runtime.js，将代码拷⻉进去
在每⼀个需要使⽤async语法的⻚⾯js⽂件中，都引⼊（不能全局引⼊）

5、微信支付权限

企业账号可以实现
企业账号的小程序后台中，必须给开发者添加白名单
- 一个 appid 可以同时绑定多个开发者
- 这些开发者就可以共用合格 appid 和它的开发权限