小程序新建小程序项目创建uni-app项目在点击工具栏里的文件 -> 新建 -> 项目（快捷键Ctrl+N）：选择

新建小程序项目

创建uni-app项目

在点击工具栏里的文件 -> 新建 -> 项目（快捷键Ctrl+N）：

选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。

新建页面

引入uview-plus组件库

支持vue3

uview-plus.jiangruyi.com/components/…

Hbuilder X方式

下载方式配置文档

如果您是使用Hbuilder X开发的用户，您可以在uni-app插件市场通过uni_modules的形式进行安装，此安装方式可以方便您后续在uni_modules对uview-plus进行一键升级。

在uni-app插件市场右上角选择uni_modules版本下的使用HBuilderX导入插件，导入到对应的项目中即可。

注意： 此安装方式必须要按照下载方式安装的配置中的说明配置了才可用。

下载地址：ext.dcloud.net.cn/plugin?name…

安装依赖库

npm i dayjs clipboard

配置easycom组件模式

此配置需要在项目根目录的pages.json中进行。

uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uview-plus的功能。请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。 uview-plus3.x配置

// pages.json
{
  "easycom": {
    "autoscan": true,
    // 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
    "custom": {
      "^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
      "^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
      "^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"
    }
  },
  
  // 此为本身已有的内容
  "pages": [
    // ......
  ]
}

关于SCSS

uview-plus依赖SCSS，您必须要安装此插件，否则无法正常运行。

如果您的项目是由HBuilder X创建的，相信已经安装scss插件，如果没有，请在HX菜单的工具->插件安装中找到"scss/sass编译"插件进行安装，如不生效，重启HX即可
如果您的项目是由vue-cli创建的，请通过以下命令安装对sass(scss)的支持，如果已安装，请略过。

// 安装sass
npm i sass@1.63.2 -D

// 安装sass-loader
npm i sass-loader@10.4.1 -D

引入uview-plus主JS库

在项目根目录中的main.js中，引入并使用uview-plus的JS库，注意这两行要放在const app = createSSRApp(App)之后。

// main.js
import uviewPlus from '@/uni_modules/uview-plus'

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(uviewPlus)
  return {
    app
  }
}
// #endif

在引入uview-plus的全局SCSS主题文件

在项目根目录的/uni.scss中引入此文件, 如果不存在uni.scss自己创建一个空白文件。

注意！

请注意uni-app官方规范中uni.scss是一个特殊文件，万万不可将其它样式比如uview-plus/index.scss引入至uni.scss中，否则会造成打包后包超大。

/* uni.scss */
@import '@/uni_modules/uview-plus/theme.scss';

引入uview-plus基础样式

在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性。

<style lang="scss">
  /* 注意要写在第一行，注意不能引入至uni.scss，同时给style标签加入lang="scss"属性 */
  @import "@/uni_modules/uview-plus/index.scss";
</style>

mock数据

http.js配置

let baseUrl 
// 生产环境使用mock的数据
if(process.env.NODE_ENV==='development'){
  baseUrl = 'http://localhost:5173'
}else{
  baseUrl = 'https://apifoxmock.com/m1/4728220-0-default/api'
}

export default function http (url, data={}, method = 'GET') {
  return new Promise((resolve, reject) => {
    uni.request({
      url: baseUrl + url,
      data,
      method: method,
      header: {
        'token': uni.getStorageSync('token') || ''
      },
      success: res => {
        console.log(res, 'res')
        // http的状态码
        if (res.statusCode == 200) {
          const resData = res.data
          if (resData.code == 1) {
            resolve(resData.data)
          } else if (resData.code == 0) {
            uni.showToast({
              title: resData.msg,
              icon: 'none'
            })
            reject(resData.msg)
          }
        }
      },
      fail: () => {
        uni.showToast({
          title: '服务器请求异常',
          icon: 'none'
        })
      }
    })
  })
}

配置h5

安装mockjs

npm i mockjs

本地存储

1. uni.setStorageSync和uni.getStorage区别

特性	`uni.setStorageSync`（同步）	`uni.getStorage`（异步）
执行方式	同步阻塞，代码会等待存储操作完成后再继续执行	异步非阻塞，立即返回，通过回调或 Promise 处理结果
错误处理	直接抛出错误（需用 `try...catch` 捕获）	通过 `fail` 回调或 `catch` 方法处理错误
性能影响	可能阻塞主线程（大量数据时影响明显）	不阻塞主线程，性能更优
返回值	无返回值（或 `undefined`）	返回 Promise 对象（如果不使用回调）

2. 同步存储（`uni.setStorageSync`）

try {
  // 存储数据（同步）
  uni.setStorageSync('userInfo', { name: 'John', age: 30 });
  console.log('数据存储成功');
  
  // 获取数据（同步）
  const userInfo = uni.getStorageSync('userInfo');
  console.log('用户信息:', userInfo);
} catch (e) {
  console.error('存储失败:', e);
}

3. 异步存储（`uni.getStorage`）

// 方式1：回调函数
uni.getStorage({
  key: 'userInfo',
  success: (res) => {
    console.log('用户信息:', res.data);
  },
  fail: (err) => {
    console.error('获取失败:', err);
  }
});

// 方式2：Promise（推荐）
uni.getStorage({ key: 'userInfo' })
  .then(res => {
    console.log('用户信息:', res.data);
  })
  .catch(err => {
    console.error('获取失败:', err);
  });

4. 适用场景

场景	推荐 API	原因
简单数据获取 / 存储	`uni.setStorageSync`	代码简洁，适合少量数据的快速操作（如配置项）
大量数据或复杂操作	`uni.getStorage`	避免阻塞主线程，提升性能（如存储大型列表数据）
需等待存储完成再执行后续	`uni.setStorageSync`	同步执行确保数据已存储（如登录后立即存储用户信息）
异步流程（如 Promise 链）	`uni.getStorage`	可直接接入 Promise 链，简化异步逻辑（如与 API 请求组合）

注意事项

存储限制：
- 小程序本地存储一般限制为 10MB（不同平台可能不同），需避免存储过大数据。
数据类型：
- 支持存储 JSON 可序列化的数据类型（如对象、数组、基本类型）。
持久化：
- 数据存储在本地，重启小程序后仍存在（除非主动删除或存储空间被清理）。
性能考量：
- 频繁调用同步 API 可能导致界面卡顿，建议在非关键路径使用异步 API。

总结

优先使用异步 API：uni.getStorage 和 uni.setStorage 性能更优，适合大多数场景。
谨慎使用同步 API：仅在必要时（如初始化阶段）使用 uni.getStorageSync 和 uni.setStorageSync。

扩展组件(uni-ui)

uniapp.dcloud.net.cn/component/u…

需要安装才能使用

登录鉴权

uni.getUserProfile(OBJECT)

获取用户信息。每次请求都会弹出授权窗口，用户同意后返回 userInfo。微信小程序端基础库2.27.1及以上版本通过wx.getUserProfile 接口获取用户头像将统一返回默认灰色头像，昵称将统一返回 “微信用户”。2.27.1以下版本获取的是用户的真实信息

getUserProfile:fail can only be invoked by user TAP gesture

不能直接在生命周期里调用，必须用户手动授权（点击按钮或者弹出一个弹窗）

老版本会弹出一个需要用户确认的弹窗

uni.getUserInfo(OBJECT)（舍弃）

uni.getUserInfo 是 uni-app 中用于获取用户信息的 API，主要应用于微信小程序、支付宝小程序等平台，用于获取用户的头像、昵称、性别等基础信息。不过需要注意的是，随着各平台隐私政策的调整，该 API 的使用场景和权限要求已发生变化，尤其是微信小程序端。

微信小程序从 2.10.4 版本开始，uni.getUserInfo 不再自动弹出授权弹窗，必须用户主动触发（如点击按钮）才能调用，否则会直接进入 fail 回调。
需在 button 组件上通过 open-type="getUserInfo" 让用户手动授权，再在回调中获取信息（见下方示例）。

uni.getUserInfo({
  provider: 'weixin', // 可选，指定服务提供商（如微信、支付宝等）
  withCredentials: false, // 是否带上登录态信息（获取加密数据时需设为true）
  success: (res) => {
    console.log('获取用户信息成功', res.userInfo);
  },
  fail: (err) => {
    console.log('获取用户信息失败', err);
  }
});


// 返回结果（res.userInfo）
{
  avatarUrl: "https://wx.qlogo.cn/...", // 用户头像URL
  city: "深圳", // 城市
  country: "中国", // 国家
  gender: 1, // 性别（0-未知，1-男，2-女）
  language: "zh_CN", // 语言
  nickName: "张三", // 昵称
  province: "广东" // 省份
}

wx.login

调用接口获取登录凭证（code）。通过凭证进而换取用户登录态信息，包括用户在当前小程序的唯一标识（openid）、微信开放平台账号下的唯一标识（unionid，若当前小程序已绑定到微信开放平台账号）及本次登录的会话密钥（session_key）等。用户数据的加解密通讯需要依赖会话密钥完成。

  <up-popup :show="show" closeable mode="bottom" @close="close" round="20">
        <view class="popup">
          <view class="title">获取您的昵称、头像</view>
          <view class="flex">
            <view class="label">获取用户头像：</view>
            <!-- open-type="chooseAvatar" 获取用户头像，可以从@chooseavatar回调中获取到头像信息 -->
            <button class="avatar-warpper" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
              <image class="avatar" :src="userInfo.avatarUrl"></image>
            </button>
          </view>
          <view class="flex">
            <view class="label">获取用户昵称：</view>
            <!-- type =”nickname“ 昵称输入键盘   -->
            <input type="nickname" @input="changeName">
          </view>
          <button size="default" type="primary" @click="userSubmit">确认</button>
        </view>
   </up-popup>
      
const close = () => {
  show.value = false 
}

// 点击获取用户头像
const onChooseavatar = (e:any) => {
  console.log('获取用户头像',e)
  userInfo.avatarUrl = e.detail.avatarUrl
}
// 用户输入昵称
const changeName = (e:any) => {
  console.log('获取用户输入昵称',e)
  userInfo.nickName = e.detail.value
}
  
const userSubmit = () => {
  uni.setStorageSync('userInfo', JSON.stringify(userInfo))
  show.value = false 
}

用户免登

// 用户免登,把用户信息存在本地，如果有就从本地获取显示出来
onLoad(async () => {
  if (uni.getStorageSync('token') && !uni.getStorageSync('userInfo')) {
    const { avatarUrl, nickName } = await getUserInfo() as UTSJSONObject
    userInfo.avatarUrl = avatarUrl
    userInfo.nickName = nickName
  } else if (uni.getStorageSync('token') && uni.getStorageSync('userInfo')) {
    const { avatarUrl, nickName } = JSON.parse(uni.getStorageSync('userInfo'))
    userInfo.avatarUrl = avatarUrl
    userInfo.nickName = nickName
  }
})

复制功能

//在uni-app中使用uView UI框架实现复制订单编号的功能。
<view @click="copy(123456789)">复制订单编号</view>

copy(expressNumber){
  uni.setClipboardData({
    data: expressNumber,//当前点击的编号
    success: function () {
      uni.showToast({
        title:'复制成功',
      })
    }
  });
},

打电话

<button @click="makeCall">拨打电话</button>

uni.makePhoneCall({
  phoneNumber: '手机号码', // 替换为实际的电话号码
  success: () => {
  console.log('拨打电话成功！');
  },
  fail: () => {
  console.error('拨打电话失败！');
  }
});

踩坑

小程序设置overflow-y: scroll; 不生效，要用scroll-view 组件

分包

开启分包默认情况下，uni-app是不会开启分包的。需要在manifest.json 应用配置文件进行配置——在对应平台的配置下添加"optimization":{"subPackages":true}开启分包优化。
在page文件夹下创建一个subPack(不限制文件夹名称)文件夹，在subPack文件夹下创建tab文件和list文件
pages.json文件配置以下配置

{
    //分包加载配置，此配置为小程序的分包加载机制。
  "subPackages": [{
    "root": "pages/subPack", //子包的根目录
    "pages": [{ //这里的配置路径和pages里的一样
        "path": "list", //配置页面路径，这里要注意，因为root已经选中了文件夹，所以我们只要填写文件名就好
        "style": {
          "navigationBarTitleText": "",
          "enablePullDownRefresh": false
        }
      },
      {
        "path": "tab",
        "style": {
          "navigationBarTitleText": "",
          "enablePullDownRefresh": false
        }
      }
    ]
  }]
}

唱乐小程序分包在page同等级新建pagesNew文件夹

"pages": [],
"subPackages": [
  {
  "root": "pagesNew",
  "name": "pagesNew",
  "pages": [
    {
      "path": "login/login",
      "style": {
        "navigationBarTitleText": "登录"
          }
        },
      ]
  }
]

获取用户的信息

1、首先调用wx.login()接口让用户授权验证，也就是我们肉眼观察到的，你是否对xxxxx授权这种信息。 2、用户成功授权后，调用wx.getUserInfo() 接口获取用户信息。

wx.login({
 success:function(){
 wx.getUserInfo({
  success:function(res){
  var simpleUser = res.userInfo;
  console.log(simpleUser.nickName);
  }
 });
 }
});

哪个属性能区分用户的唯一性

微信小程序获取用户唯一标识需要使用到微信小程序的api： wx.login()。具体步骤如下：

在小程序中调用 wx.login() 方法，获取到 code。
使用 code 发送请求到微信服务器，获取到 session_key 和 openid。
将 session_key 和 openid 存储到服务器端，以供后续业务使用。
在需要获取用户唯一标识的地方，将用户的 openid 传递给服务器端，服务器端就可以根据 openid 获取到对应用户的信息。

需要注意的是，获取到用户的唯一标识后，需要进行安全处理，避免泄露用户信息，保障用户隐私安全。

跑通uni-pay统一支付示例项目实现微信小程序支付详细的配置参数

blog.csdn.net/qq_18798149…

小程序