b-小程序基础

一：基础

1：设计稿是750,小程序的宽度是750rpx

2：网页使用

<view class="prefile"></view>
1

3：小程序轮播

// autoplay：为自动播放；
// circular：为循环播放
// indicator-dots出现轮播原点效果  
      indicator-color="#fff"圆点默认颜色
      indicator-active-color="#fff"圆点选中颜色
<swiper autoplay indicator-dots circular>
    <swiper-item> //放入轮播内容 </swiper-item>
</swiper>
1
2
3
4
5
6
7
8

4：小程序 index.js 页面中必须调用 Page 函数,且要有一个参数为对象类型

Page({
   data:{
       处理数据
       message:'hello word'
   }，
   // 小程序中不需要写 method方法
   sayHi() {
    // console.log('你好~');
    // 如果想改数据  正确的写法 必须加this.setData({})
    this.setData({
        message:'sayhi'
    })
    
    // 正确的读取数据 （this.data必须加data）
    this.data.message;
   }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// 用 bind:事件名称/类型="事件回调"
// 在小程序中没有 （click点击） 而是 tap为点击事件
<view bind:tap="sayHi" class="msg">{{message}}</view>
1
2
3

5：在 input 输入框中

// value是用来显示数字
<input value="{{number}}" type="text" />
1
2

6：小程序跳转链接为

<navigator url="./demo">跳转到指定页面</navigator>
1

7：全局 app.json 文件基础配置 (配置项)

// 文件路由
"pages": ["pages/index/index"]
"window": {
      // 全局头部标题
    "navigationBarTitleText": "学习小程序",
      // 头部背景颜色
    "navigationBarBackgroundColor": "#f00",
      // 头部文字颜色（只能设置white,black两种颜色）
    "navigationBarTextStyle": "white"
      //下拉功能
    "enablePullDownRefresh": true
  }
// 首页底部导航切换效果
 "tabBar": {
    "list": [
      {
        "text": "首页",
          // 地址
        "pagePath": "pages/index/index",
          // 图标
        "iconPath": "static/tabbar/home-default.png",
          // 选中后的图标
        "selectedIconPath": "static/tabbar/home-active.png"
      },
      {
        "text": "日志",
        "pagePath": "pages/logs/logs",
        "iconPath": "static/tabbar/category-default.png",
        "selectedIconPath": "static/tabbar/category-active.png"
      }
    ]
     // 文字默认颜色
    "color":"#333",
     // 选中后的文字颜色
    "selectedColor": "#e93b3d",
     // 底部背景颜色
    "backgroundColor": "#ffffff",
     // 边框颜色
    "borderStyle": "white",
     // tab栏的位置
    "position": "bottom",
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

8：图片设置，必须使用网络图片地址或者base64格式的

.box {
    width: 300rpx;
    height: 200rpx;
    background-color: pink;
    /* background-image: url(/assets/images/avatar_1.jpg); */
    background-image: url(https://tenfei02.cfp.cn/creative/vcg/800/new/VCG41N1210205351.jpg);
    background-size: contain;
}
   /* 字体文件也是要写在 wxss 里，因此不能用本地路径必须放到服务器上 */  
1
2
3
4
5
6
7
8
9

二：小程序模板语法：

**1.1 双向绑定 **

// model:value="{{绑定的值}}"
<view class="msg">{{msg}}</view>
// 双向绑定
<input type="text" model:value="{{msg}}" />
1
2
3
4

Page({
    data: {
        msg: '这是一个小程序'
    }
})
1
2
3
4
5

1.2 使用 wx:for 对数组进行遍历：

/* 
	注：循环比较复杂时 如果要把默认的  item  替换掉的话 要加入  "wx:for-item="students" 
		索引："wx:for-index="key" 
*/  
1
2
3
4

例：<view class="item" wx:for="{{students}}">
    /* 如果只循环一层 序号默认为{{index}} 内容用{{item.定义的名称}}*/
    	<text>{{index+1}}</text>
    	<text>{{item.name}}</text>
    	<text>{{item.age}}</text>
    	<text>{{item.gender}}</text>
	</view>
1
2
3
4
5
6
7

Page({
    data: {
	students: [
    	{id: 1,name: '小明',age: 19,gender: '男'}, 
    	{id: 1,name: '小红',age: 18,gender: '女'}, 
    	{id: 1,name: '小刚',age: 20,gender: '男'}, 
    	{id: 1,name: '小白',age: 18,gender: '女'}
	]
   }
})
1
2
3
4
5
6
7
8
9
10

单独数组的形式：wx:key="this" 使用this代替

<text wx:for="{{names}}" wx:key="*this">{{item}}</text>
1

Page({
    data:{
        names: ['小红', '小明', '小凡']
    }
})
1
2
3
4
5

1.3：wx:if 和 wx:else 的用法

// 条件处理：wx：if=“{{条件}}”
// 配合 else 使用
<button bind:tap="toggle" type="primary">显示/隐藏</button>
//通过移除节点来实现显示和隐藏的
<view wx:if="{{seen}}">{{msg}}</view>
1
2
3
4
5

1.4 hidden 的使用

<button bind:tap="toggle" type="primary">显示/隐藏</button>
// 和wx:if效果一样：不过是通过 display：none 来控制显示隐藏的
<view hidden="{{seen}}">{{msg}}</view>
1
2
3

1.5 block 用法

<block wx:if="{{false}}">
 // ...被隐藏的内容
</block>
// 显示wx:else的内容
<view wx:else>空空如也~</view>
 
1
2
3
4
5
6
7

三：生命周期

小程序的生命周期：（三类）应用级别、页面级别、组件级别

2.1 应用级别

onLaunch() 、onShow()、onHide()

// App  是全局函数，首字母大写，传入对象类型参数
//  应用级别 要写到app.js中 必须要调App（{}）函数
App({
    onLaunch() {
        // 只会执行 1 次，除非重新执行
        console.log("小程序启动了...");
    },
    onShow() {
        // 反复执行
        console.log("前台运行中...");
    },
    onHide() {
        // 反复执行
        console.log("后台运行中...");
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2.1.1 场景值

描述用户如何打开小程序的

// 只能在onLunch()和onShow中使用
onLaunch(params) {
        // 只会执行 1 次，除非重新执行
        console.log("小程序启动了...");
        console.log(params); // 控制台输出
    },
1
2
3
4
5
6

地址带参数传到另一个页面

// index页面：
<navigator url="/pages/logs/logs?name=小明&age=19">去日志页面</navigator>
1
2

// logo.js页面
Page({
    // 必须用 onLoad()获取传过来的参数
    onLoad(query) {
        // 渲染地址中的参数
        this.setData(query)
    }
})
// 渲染到页面
<view>姓名：{{name}},年龄：{{age}}</view>
1
2
3
4
5
6
7
8
9
10

3.1 网络请求

wx.request({
    url:'qpi/path/xxxx',
    method:'GET|POST|PUT',
    data:{},
    //success(res){
        //成功响应的回应
    //},
    // 要想使用 this 必须使用箭头函数
    this.setData({
       students: res.data.result
    })
})
1
2
3
4
5
6
7
8
9
10
11
12

3.1.1 wx.showLoading 加载

  wx.showLoading({
            title: '正在加载.....',
          	// 在加载的过程中 避免在加载的过程中用户点击页面
            mask: true
        })

        // 调用 wx.request 发起请求
        wx.request({
            url: 'https://mock.boxuegu.com/mock/3293/students',
            method: 'GET',
            success: (res) => {
                // 要想使用 this 必须使用箭头函数
                this.setData({
                    students: res.data.result
                })
            },
            // 不管成功与否都要执行 complete ，所以在里面写 wx.hideLoading() 加载结束
            complete() {
                wx.hideLoading()
            }
        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3.1.2 wx.showToast 提示的使用

<input type="text" model:value="{{username}}" />
<button bind:tap="submitForm" type="primary">提交</button>
1
2

   submitForm() {
        // 汉子正则
        const reg = /^[\u4e00-\u9fa5]{2,5}$/;
        // .test 验证 姓名
        const valid = reg.test(this.data.username)
        // wx.showToast 
        if (!valid) wx.showToast({title: '只能输入中文姓名',icon:'error',mask: true})
    },
1
2
3
4
5
6
7
8

3.2 本地存储

// wx.setStorageSync  在本地存入一个数据
// wx.getStorageSync  读取本地的一个数据
// wx.removeStorageSync  删除本地存储的一个数据
// wx.clearStorageSync  清空本地存储的数据
1
2
3
4

    <button type="primary" bind:tap="setStorage">添加本地数据</button>
    <button type="primary" bind:tap="getStorage">读取本地数据</button>
    <button type="primary" bind:tap="removeStorage">删除本地数据</button>
    <button type="primary" bind:tap="clearStorage">清空本地数据</button>
1
2
3
4

存入数据：

setStorage() {
        // 小程序有 api
        // wx.setStorage(数据名，数据本身)
        wx.setStorageSync('user', {name: '小红',age: 18})
   },
1
2
3
4
5

读取本地数据

getStorage() {
    // wx.getStorageSync('数据名')
    // 如果存入的是 json 字符串，不需要 JSON.parse() 处理
        const user = wx.getStorageSync('user')
        console.log(user);
   },
1
2
3
4
5
6

四：使用npm/yarn包

// yarn add miniprogram-computed  命令

// 安装成功后 必须要点 工具栏里面的 构建npm选项
// 引入：
  const computedBehavior = require('miniprogram-computed').behavior;
//使用：
  Page({
      // 将其应用到页面中
     behaviors: [computedBehavior], 
  })
1
2
3
4
5
6
7
8
9
10

// 重构目录
// 把assets、pages、utils,全局app.js、app.json、app.wxss 统一放到一个新建的文件夹中 （如：miniprogram文件中）
//在 project.config.json 中加入   

"miniprogramRoot": "miniprogram/",  //自定义小程序目录
     
 // 在 "setting" 里加入：
"setting": 
{
    // 将false改为true
     "packNpmManually": true,
}
 "packNpmRelationList": [
       {
           "packageJsonPath": "./package.json",
           "miniprogramNpmDistDir": "./miniprogram"
       }
   ],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

注： 配置完要点击工具->构建npm

4.1.1 vant 组件库的使用

// 去官网
1

五：注册组件

1. 添加一个文件（名字随意）如：conponents，

2. 例：在components 中创建一个 auth 的组件，

3. 使用组件：在page中 例如index要使用，在 index.json中加入 auth组件的路径

    "usingComponents": {
        // 要注意路径是从components开始的
      "auth": "/components/auth/index"
     }
   1
   2
   3
   4

4. 组件里要定义一些方法的时候要通过 methods

     /*** 组件的方法列表  */
     methods: {
       sayHi() {
         console.log("你好，我是一个组件");
          // 读取数据
         console.log(this.data.name + "你好");
          // 更新数据
         this.setData({ name: '小小明'})
       }
     }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10

   <view>{{name}}</view>
   <button bind:tap="sayHi" type="primary">打招呼</button>
   1
   2

5.1 组件的生命周期

// 语法：
lifetimes: {
    created() {
      console.log("组件实例被创建了...");
      // properties 中的数据 也是用 this.data 获取
      console.log(this.data.isLogin);
    },
    // 相当于vue中的monthed
    attached() {
      console.log("组件渲染到页面中了...");
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12

5.1.1 生命周期（逻辑）

使用生命周期去检测登录的状态 例：

<auth is-login="{{false}}" tips="{{[1,2,3]}}"></auth>
1

lifetimes: {
    attached() {
    // 验证登录结果
    const isLogin = this.checkLogin()
    // 更新数据
    this.setData({ isLogin })
  },
}
// 在组件一加载的时候判断用户是否登录
methods: {
     // 检测登录 （找本地存的 token）
    checkLogin() {
       // !! 相当于是否
      return !!wx.getStorageSync('token')
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

5.2 组件模板

5.2.1 插槽

在代码中使用

<auth is-login="{{false}}" tips="用户未登录！">
  <view>这里的内容会填充到 slot 插槽的位置</view>
  <view>这里的内容会填充到 slot 插槽的位置</view>
</auth>
1
2
3
4

在组件中定义：

<view class="container">
    // 在组件中定义插槽
  <slot wx:if="{{isLogin}}"></slot>
  <text wx:else>{{tips}}</text>
</view>
1
2
3
4
5

注：在小程序中默认值支持一个插槽

// 小程序中如果要定义多个插槽 需要开启 
options: {
    // 启用多插槽
    multipleSlots: true
 }
1
2
3
4
5

使用 vant

// 安装 vant
npm i @vant/weapp -S --production --registry=https://registry.npmmirror.com
// 如果安装不上先 npm init -y 一下
1
2
3

5.3 样式设置：

/* 全局设置 */
page {
  --my-color: pink;
  --my-text-color: green;
  --cell-large-title-font-size: 30rpx;
}

.box {
  /* 作用域仅限 box 本身及其后代代码 */
  /* --my-color: pink;
  --my-text-color: green; */
  /* background-color: var(变量名); */

  width: 400rpx;
  height: 200rpx;
  /*  使用全局样式 */
  background-color: var(--my-color);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

5.4 ：小程序分包

// 在 app.json（全局配置） 中新加一个
"subPackages": [
    {
        // 分包的名字
      "root": "goos_pkg",
        // 分包的路径
      "pages": ["pages/goods/list"]
    }
  ],
1
2
3
4
5
6
7
8
9

注：tabBar只能放到主包中

// 也是在 app.json 中添加
// 打开首页面时 提前下载 goods这个包
"preloadRule": {
    "pages/index/index": {
      "packages": ["goods"]
    }
  },
1
2
3
4
5
6
7

六：框架接口

在 app.js 中必须调用 App({})

在页面当中 js 文件中必须调用 Page({}) 函数

在组建当中 js 文件中必须调用 Component({}) 函数

// 在 app.js中
App({a: 1, b: 2, c: 3})
1
2

// 获取应用实例
// 获取的是全局 app.js 中 App 中定义的数据，实现整个小程序数据的共享
const app = getApp()
console.log(app);
1
2
3
4

6.1：getCurrentPages（）

// getCurrentPages() 获取当前所有已打开的页面实例
// 实例中包含了 route 属性
onLoad(options) {
    const pageStack = getCurrentPages()
    console.log(pageStack);
  },
      
// 取出最后一个页面的 route 路径
    const currentPage = pageStack[pageStack.length - 1]
    console.log(currentPage.route);
1
2
3
4
5
6
7
8
9
10

6.2 获取头像

<!-- 获取头像 -->
<view class="avatar">
    <!-- 官方获取头像：open-type="chooseAvatar" -->
    <button open-type="chooseAvatar" bind:chooseavatar="getUserAvatar">
      <image src="{{profile.avatarUrl}}"></image>
    </button>
</view>
1
2
3
4
5
6
7

Page({
  data: {
    profile: {  avatarUrl: '/static/images/avatar.png' }
  },
   // 添加绑定事件
  getUserAvatar(ev) {
    this.setData({
       // 点击切换头像的路径：ev.detail.avatarUrl
      profile: { avatarUrl: ev.detail.avatarUrl }
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12

6.3 获取昵称

<!-- 1、设置 input 的 type 属性值为 nickname
     2、监听 input 组件 input、blur、change 等事件获取表单中的值
-->
 <view class="nickname">
    <label for="">昵称</label>
    <input bind:blur="getUserNickName" type="nickname" value="{{profile.nickName}}" />
 </view>
1
2
3
4
5
6
7

getUserNickName(ev) {
    console.log(ev);
    this.setData({
        // 两种写法一样
      //profile: {
           // 点击获取昵称的路径：ev.detail.value
      //  nickName: ev.detail.value,
      //}
      'profile.nickName': ev.detail.value,
    })
  }
1
2
3
4
5
6
7
8
9
10
11

七：路由

小程序的路由就是简单的路由跳转

7.1 ：普通跳转形式

<!-- 用普通形式跳转,在返回的时候会一层一层的返回 -->
<navigator url="/pages/logs/logs" open-type="navigate">普通的跳转（去日志页面）</navigator>
1
2

7.2 ：重定向跳转形式

<!-- 用重定向形式跳转,在返回的时候会直接返回到首页 -->
<navigator url="/pages/router/index" open-type="redirect">去路由页面（重定向）</navigator>
1
2

7.3：跳转到导航页

<!-- 如果一个页面被设置成了 tabBar 页面，只能通过 open-type="switchTab" 才可以跳转过去 -->
<navigator open-type="switchTab" url="/pages/cart/index">去购物车</navigator>
1
2

7.4：跳转后不能返回

<!-- 跳转后不能返回 open-type="reLaunch" -->
<navigator url="/pages/logs/logs" open-type="reLaunch">去日志页面（reLaunch）</navigator>
1
2