uni-app笔记

UNI-APP

语法根据创建项目时选择的版本 vue2 / vue3

JavaScript 语法

起步

安装编辑器

推荐使用 HBuilder X 编辑器

https://www.dcloud.io/hbuilderx.html

安装scss/sass编译

https://ext.dcloud.net.cn/search?q=scss

下载插件并导入HBuilder X

快捷键方案切换

工具 》 预设快捷键方案切换 》vs code

创建项目

文件 》 新建项目 》 选择uni-ui模板 》vue2版本 》创建

目录结构

components — 组件文件夹

pages — 页面文件夹

static — 静态文件文件夹（图片、视频等）

main.js — vue初始化入口文件

App.js — 应用配置、用来配置小程序的全局样式、生命周期函数等

manifest.json — 配置应用名称、appid、logo、版本等打包信息

pages.json — 配置页面路径、页面窗口样式、tabBar、navigationBar等页面类信息

项目运行

1、manifest.json 》微信小程序配置 》填写小程序的appid

2、工具 》设置 》 运行配置 》小程序运行配置 》配置微信开发者工具的安装路径

3、在微信开发者工具中，设置 》 安全 》 开启服务端口

4、运行 》 运行到小程序模拟器 》微信开发者工具

5、manifest.json 》源码视图 》 mp-weixin 节点 》 setting 》 “checkSiteMap”: false，取消控制台警告

6、manifest.json 》源码视图 》 mp-weixin 节点 》 “libVersion”: “latest” 解决编译错误

使用git管理

项目根目录新建自定义文件 .gitignore 内容如下

/node_modules
/uni_modules
/unpackage/dist

unpackage目录下新建自定义文件 .gitkeep

然后就可以终端里进行 git init 开始管理了

建立 package.json 文件

npm init -y

创建页面目录

鼠标右键新建页面 》输入页面名称 》 选择模板scss 》 勾选在pages.json中注册 》 创建

tabBar导航栏配置

pages.json

底部 tabBar 导航栏的配置

最少2个最多5个

"tabBar": {
 // 按钮项数组 最少2个最多5个
 "list": [
  {
    // 对应的页面路径
    "pagePath": "pages/home/home",  
    // 按钮名称
    "text": "首页", 
    // 按钮图标 未选中时的
    "iconPath": "/images/tabs/home.png", 
    // 按钮图标 选中时的
    "selectedIconPath": "/images/tabs/active.png"
  }
 ],
 "backgroundColor":'#ffffff',  // tabBar背景颜色
 "selectedColor":""  // 选中项的文本颜色
}

顶部导航栏的配置

"globalStyle": {
	// 标题文本的颜色
    "navigationBarTextStyle": "black",
    // 标题文本
	"navigationBarTitleText": "uni-app",
	// 导航条背景色
	"navigationBarBackgroundColor": "#F8F8F8",
    // 开启下拉刷新
    "enablePullDownRefresh": true,
    // 下拉loading的样式，仅支持dark/light
    "backgroundTextStyle":"light",
    // 下拉窗口的背景色
	"backgroundColor": "#F8F8F8",
    // 上拉触底的距离：默认50像素，单位省去,我们会在触发了上拉触底事件时获取下一页的数据
    "onReachBottomDistance": 50
}

导航栏对应页面配置

pages 页面配置

pages.json

// 导航栏中几个页面这里就配置几个对象
"pages": [
    {
      "path": "pages/home/home",
      // style配置项见下
      "style": {
          
      }
    }
  ]

style配置项

"style": {
// 下拉loading的样式，仅支持dark/light
"backgroundTextStyle":"light",
// 配置导航栏背景色,仅支持16进制的颜色
"navigationBarBackgroundColor": "#fff",
// 导航栏标题文本
"navigationBarTitleText": "微信读书",
// 导航栏标题颜色，仅支持 black/white
"navigationBarTextStyle":"black",
// 开启下拉刷新
"enablePullDownRefresh": true,
// 下拉窗口的背景色
"backgroundColor": "#efefef",
// 上拉触底的距离：默认50像素，单位省去,我们会在触发了上拉触底事件时获取下一页的数据
"onReachBottomDistance": 50
}

分包

在uni-app里适用于 存放 详情页 等 二级跳转页面

创建分包根目录文件夹 subpkg

在pages.json中 和pages节点平级 声明 subPackages节点

  "subPackages": [{
    "root": "subpkg",  // 分包的根目录,需与文件夹名字相同
    "pages": []   // 当前分包内有哪几个页面
  }],

新建分包页面

只需要在subpkg文件夹右键 新建页面 并且在pages.json 注册 就会自动添加进这个数组

标签

view

等于 div 标签

text

等于 span 标签

selectable 属性 可实现长按选中

<text selectable>13000000000</text>

image

等于 img 标签

navigator

等于 a 标签

<navigator url="/pages/home/home"> </navigator>

组件

components 文件夹 右键新建组件 勾选创建同名目录

在页面就可以直接使用 这个组件名的标签

具体可看文档，以下只介绍常用的

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

uni-ui 扩展组件库 https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html

rich-text - 富文本组件

nodes 属性 将字符串渲染成标签

具体看官网 https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

<rich-text nodes="<h1>标题</h1>"> </rich-text>

scroll-view - 滑动组件

手指按住滑动

用scroll-view标签包裹给这个标签设高度或宽度 当里面的盒子超过这个标签的宽度或高度就会自动隐藏超出部分

scroll-y 允许竖向滚动
scroll-x 允许横向滚动
scroll-top 滚动条距离顶部的距离 :scroll-top=‘0’

具体看官网 https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

<scroll-view scroll-y>
	<view>1</view>
	<view>2</view>
	<view>3</view>
</scroll-view>

swiper - 轮播图组件

swiper代表大盒子 swiper-item 代表子项

以下为常用属性

indicator-dots:true 显示小圆点
indicator-color: ‘’ 小圆点颜色
indicator-active-color:“” 圆点选中时的颜色
autoplay:true 是否自动切换
interval:5000 自动切换时长
circular:true 是否采用衔接滑动 就是滑到最后一张后下一次就回到第一张

具体看官网 https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

<swiper indicator-dots>
    <swiper-item>
        <view>1</view>
    </swiper-item>
    
    <swiper-item>
        <view>2</view>
    </swiper-item>
    
    <swiper-item>
        <view>3</view>
    </swiper-item>
</swiper>

button - 按钮组件

type 属性指定按钮颜色类型

size 属性指定按钮尺寸

plain 属性显示按钮边框，按钮颜色透明

disabled 禁用

open-type 属性可以调用微信提供的各种功能（客服、转发、获取授权、获取信息等）

具体看官网 https://developers.weixin.qq.com/miniprogram/dev/component/button.html

<button type='primary' size="mini" plain>按钮</button>
<button type='warn' size="mini" plain>按钮</button>

image - 图片组件

mode 属性功能 指定图片的裁剪和缩放模式

image 标签有个默认宽高

mode='scaleToFill'  
// 默认的 图片宽高完全填充 相当于w h100%

mode='aspectFit'  
// 图片等比例缩放 长边完全显示出来 会造成短边有空隙不充满

mode='aspectFill'  
// 图片等比例缩放 短边完全显示 长边会显示不全

mode='widthFix'
// 图片宽度不变 高度自适应

mode='heightFix'
// 图片高度不变 宽度自适应

配置网络请求

下包

npm install @escook/request-miniprogram

导入

main.js

// 按需导入 $http 对象
import { $http } from '@escook/request-miniprogram'

// 将按需导入的 $http 挂载到 wx 顶级对象之上，方便全局调用
wx.$http = $http  // 原生开发挂载方式

// 在 uni-app 项目中，可以把 $http 挂载到 uni 顶级对象之上，方便全局调用
uni.$http = $http   // uni-app项目挂载方式

配置请求的根路径

main.js

$http.baseUrl = '根路径'

请求拦截器

main.js

// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
  // 例如 展示loading
  wx.showLoading({
    title: '数据加载中...',
  })
  // 例如配置请求头
  if(options.url.indexOf('/home/home')!==-1) {
    options.header = {
        'X-Test': "AAA....."
    }
  }
}

响应拦截器

main.js

// 请求完成之后做一些事情
$http.afterRequest = function () {
  // 例如 隐藏loading
  wx.hideLoading()
}

使用

// 发起 GET 请求，data 是可选的参数对象
uni.$http.get(url, data)

// 发起 POST 请求，data 是可选的参数对象
uni.$http.post(url, data)

// 发起 PUT 请求，data 是可选的参数对象
uni.$http.put(url, data)

// 发起 DELETE 请求，data 是可选的参数对象
uni.$http.delete(url, data)

// 示例
async getInfo(){
  const res = await uni.$http.get(url, data)
}

页面跳转

open-type 代表跳转的方式

声明式导航

awitchTab

跳转到导航栏中的页面

必须指定 open-type 属性 值为 awitchTab

<navigator url='/index' open-type='awitchTab'>首页</navigator>

navigate

跳转到非导航栏中的页面

open-type 属性 值为 navigate (可不写)

<navigator url='/index' open-type='navigate'>跳转到非导航栏页面</navigator>

navigateBack

后退到上一页面

navigateBack 代表后退 delta=’ ’ 代表后退几个页面

<navigstor open-type='navigateBack' delta='1'>后退一个页面</navigstor>

编程式导航

wx:switchTab({ })

跳转到导航栏中的页面

<button bindtap='goTo'>点击跳转</button>
goTo(){
  wx:switchTab({
    url:''
  })
}

wx:navigateTo({ })

跳转到非导航栏中的页面

<button bindtap='goTo'>点击跳转</button>
goTo(){
  wx:navigateTo({
    url:''
  })
}

wx:navigateBack( )

后退到上一页面

<button bindtap='goTo'>点击跳转</button>
goTo(){
  wx:navigateBack()
}
// 后退多层
goTo(){
  wx:navigateBack({
      delta：5
  })
}

导航传参

地址后面 ？拼接参数 例： ?name=zs&age=20

options - 接收参数

通过 onLoad生命周期函数 拿到参数

onLoad:function(options){
  log(options)  // 可以拿到参数
}

获取当前设备信息

uni.getSystemlnfoSync()

const info = uni.getSystemlnfoSync()
info.brand  // 手机品牌
info.model  // 手机型号
info.pixelRatio  // 设备像素比
info.screenWidth  // 屏幕宽度
info.screenHeight  // 屏幕高度
info.windowWidth  // 窗口宽度
info.windowHeight  // 窗口高度
info.windowTop  // 可使用窗口的顶部位置
info.windowBottom  // 可使用窗口的底部位置

本地储存

存入 uni.setStorageSync(‘key’,value)

读取 uni.getStorageSync(‘key’,value)

下拉刷新

onPullDownRefresh( )

下拉会触发这个函数

wx.stopPullDownRefresh()

事件处理完在函数里调用停止刷新

上拉触底

onReachBottom( )

上拉触底会触发这个函数

// 下拉刷新 上拉触底 函数要和methods平级
export default {
    methods: {
    },
    onReachBottom() {
    }
}

生命周期

  onLoad(){
    // 页面加载 相当于 created() 一个页面只调用一次
  },
  onShow(){
    // 页面展示会触发
  },
  onReady(){
    // 页面渲染完成会触发 可以在这里重新设置标题 一个页面只调用一次
  },
  onHide(){
    // 页面被隐藏会触发
  },
  onUnload(){
    // 页面卸载会触发   一个页面只调用一次
  }

vuex

用法相同

1、新建 store文件夹

2、store文件夹右键新建 store.js

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
// 导入单模块
import user from './user.js'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules:{
    // 注册单模块
    'user':user
  }
})

export default store

3、单模块 举例 user.js

export default {
  // 模块具备单独的命名空间
  namespaced: true,
  // state 就是容器  数据保存的位置
  state: {
      userinfo:{}  // 变量
  },
  // mutations 修改数据的唯一方式 必须是同步的
  mutations: {
    setUser (state, user) {//第一个是固定 第二个形参
     state.userinfo = user // 容器里的变量 形参通过调用传入
    }
  },
  // 处理异步操作的地方
  actions: {
    login(context,payload){//第一个是固定写法 第二个形参
    context.commit('setUser',实参) // 可以调用mutations 里的方法 将数据传过去
    }
  },
  // getters 映射
  getters:{
      name(state) {
          return state.userinfo.name
      }
  }
}

4、main.js里

import store from './store/store.js'

const app = new Vue({
   ...App,
   store
})
app.$mount()

5、使用数据

import { mapState,mapMutations,mapGetters } from 'vuex'

export default {
  computed:{
    // 使用user模块里的数据
    ...mapState('user',['数据名']),
    // 使用映射的数据
    ...mapGetters('user',['映射名'])
  },
  methods:{
    // 使用user模块里的方法
    ...mapMutations('user',['方法名'])
  }
}
数据 和 方法 都可以用this.  来调用

TabBar设置数量徽标

比如购物车商品数量

export default {
  // 生命周期里调用
  onShow(){
    this.setBadge()
  },
  methods: {
    // 设置徽标的方法
    setBadge(){
     uni.setTabBarBadge({
       index:  ,  // 索引 要给第几个按钮设置徽标
       text:   // 徽标内容 必须是字符串不能是数字
     })
   }
  }
}

左滑显示删除按钮

:right-options=“options” 左滑显示按钮

:left-options=“options” 右滑显示按钮

options 按钮配置项

<uni-swipe-action>
    <uni-swipe-action-item :right-options="options"  @click="onClick" @change="swipeChange($event)">
		<view >item1</view>
    </uni-swipe-action-item>
</uni-swipe-action>

export default {
  data(){
    return {
      options:[
        {
            text: '取消',  // 按钮文本
            style: {
               backgroundColor: '#007aff' // 按钮颜色
            }
        }, {
            text: '确认',
            style: {
                backgroundColor: '#dd524d'
            }
        }
      ]
    }
  },
  methods:{
    onClick(e){
      // 点击的按钮
      console.log(e.position)  // left 或 right
      console.log(e.content.text) // 取消 或 确认
    },
    swipeChange(e){
      console.log(e) // 滑动状态
    }
  }
}

登录

具体看官网

https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.pluginLogin.html

发布为小程序

发行 》 小程序-微信 》 填写小程序名称及appid 》发行 》 发布编译完成后会自动打开微信开发者工具界面 》 点击右上角上传按钮 》 确定 》 填写版本号及项目备注 》 上传 》确定

登录小程序管理后台 > 管理 > 版本管理 > 开发版本，查看刚才提交的版本

点击开发版本提交审核

审核通过后，管理员微信会收到通知，此时审核版本的列表中，点击发布按钮，即可把审核通过的版本发布为线上版本，供用户访问和使用

推广

基于小程序码进行推广

登录小程序管理后台 》设置 》基本设置 》基本信息 》小程序码及线下物料下载

运营数据

查看小程序运营数据 * 两种方式

1. 在 小程序管理后台 查看

登录小程序管理后台 》点击侧边栏的统计 》点击相应的tab可以看到相关的数据

2. 使用 小程序数据助手 查看

打开微信 》搜索小程序数据助手 》查看已发布的小程序相关的数据

发布为APP

1. manifest.json 文件 》基础配置 》获取uni-app应用标识 》 填写应用名称

2. 切换到App图标配置 》点击浏览 》选择一张图片 》自动生成所有图标并替换

3. 点击菜单栏上 发行 》 原生app-云打包 》勾选安卓包（ios包需要购买开发者身份）》 勾选使用公共测试证书 》勾选打正式包 》 打包

4. 打包完成会在控制台显示 下载地址， 就可以下载在安卓手机安装了