当前位置：首页 > news >正文

uniapp开发小程序

news 2025/10/15 6:36:08

一、开发准备

1、编辑器：Hbuilder

 在工具-插件安装，装一下git

2、运行环境：微信开发者工具

在Hbuilder中选择 运行-运行到小程序模拟器-微信开发者工具，会自动打开微信开发者工具
需要在微信开发者工具中登录，然后在 详情-基本信息中配置appId

3、创建项目

(1) 通过 CLI 脚手架创建（推荐）

#全局安装Vue CLI
npm install -g @vue/cli
#创建 Vue3 + Vite 模板项目
npx degit dcloudio/uni-preset-vue#vite my-uni-app

(2) 通过 HBuilderX 可视化创建

点击菜单栏「文件 > 新建 > 项目」
选择「uni-app 项目」，模板选择「默认模板（Vue3）」，填写项目名称和路径
点击「创建」，自动生成基于 Vue3 的 uni-app 项目

三、需要注意的点

1、 onLoad, onShow 生命周期

在 uni-app 的 Vue 3 语法中，使用页面生命周期时，必须从 @dcloudio/uni-app 导入

import { onLoad, onShow } from '@dcloudio/uni-app'

四、常用功能

1、登录授权

const loginRes = await uni.login({ provider: 'weixin', //使用微信登录 });
请求结果loginRes 里有一个code，可以拿来给后端，后端根据code查头像、userId、手机号等

2、扫码

const scanResult = await uni.scanCode({onlyFromCamera: true, 	//默认false既可以使用相机，也从本地相册选取图片scanType: ['qrCode']	//['qrCode', 'barCode']，qrCode二维码，barCode条形码
});

请求结果scanResult里面有个result，是扫描的二维码的地址，可以从地址中获取携带的参数
获取二维码携带的参数：

import { onLoad } from '@dcloudio/uni-app'	//需要从uniapp引入
onLoad((options) => {deviceId.value = options?.device_id	//开发环境if (options.scene) {	//生产环境const sceneParams = decodeURIComponent(options.scene)deviceId.value = sceneParams.split('=')[1];}
});