uni-app进行微信小程序开发，快速上手

准备工作

  • IDE

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

  • 微信小程序开发工具

下载 / 稳定版更新日志 (qq.com)

  • 安装流程

  • 打开HBuilderX 点击这个logo打开终端 然后 下载一下终端插件

初始化一个demo

  • 通过vue-cli命令行创建项目

uni-app官网 (dcloud.net.cn) （官方文档）

  • 可视化方式创建

uni-app官网 (dcloud.net.cn) （官方文档）

  • 或者下载一个项目模板

下载仓库 http://DCloud/uni-preset-vue - Gitee.com

我在这里使用了命令行方式创建一个空项目

  • 全局安装 vue-cli（脚手架）

  • 创建uni-appnpx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

项目目录结构

  • 运行的配置

OK了！！！

demo能够跑起来直接精通了

开始 "实战"

完整前端代码

zql-uniapp · 企业级代码管理平台 (aliyun.com)

目标

主要目标

  • 菜单实现

  • 页面跳转实现（携带参数和不带参数）

  • 登录拿到username和微信头像

  • openId存到pinia

菜单实现

  • 新建页面

新建四个页面之后检查一下再pages.json中是否都注册成功

没有的话 手动写一下

  • 使用tabBar组件创建菜单

通义tongyi.ai_你的全能A

I助手.html(5.2 MB)

- 0%

{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app"}},{"path" : "views/index","style" : {"navigationBarTitleText" : ""}},{"path" : "pages/login/login","style" : {"navigationBarTitleText" : "我的"}},{"path" : "pages/about/about","style" : {"navigationBarTitleText" : "关羽"}},{"path" : "pages/log/log","style" : {"navigationBarTitleText" : "log"}}],"tabBar": {"backgroundColor": "248,248,248","color": "#000000","selectedColor": "#3cc51f","borderStyle": "black","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "static/xinxi.png","selectedIconPath": "static/xinxifill.png"},{"pagePath": "pages/about/about","text": "收藏","iconPath": "static/shoucang.png","selectedIconPath": "static/shoucangfill.png"},{"pagePath": "pages/login/login","text": "我的","iconPath": "static/jingli.png","selectedIconPath": "static/jinglifill.png"}]},"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"}
}

  • 不相关资源

iconfont-阿里巴巴矢量图标库

页面跳转

  • 一个是跳转的组件

navigator | uni-app官网 (dcloud.net.cn)

<navigator :url="'/pages/navigate/navigate?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>

  • 一个是 navigateTo方法

uni.navigateTo({url: `/pages/log/log?msg=${(inputValue.value)}`,fail: (err) => {console.log(err)}});

navigateTo的Api

uni.navigateTo(OBJECT) | uni-app官网 (dcloud.net.cn)

  • 携带参数跳转url: `/pages/log/log?msg=${(inputValue.value)}`

  • 目标页面接受参数

onLoad((options) => {      console.log(options.msg);      msg.value = options.msg;  
});

  • 跳转tabBar页面

const switchTabTo = () => {uni.switchTab({url: '/pages/login/login', //必须在pages.json的tabBar组件注册fail: (err) => {console.log(err)}});}

index.vue

<template><view class="text-area"><input class="custom-input" type="text" v-model="inputValue" placeholder="请在此输入" /><view class="button-container"><!-- <button @click="switchTabtiaozhuan">switchTab跳转到关于页面</button> --><button type="primary" @click="navigaToLog">方法跳转</button></view><view c"><!-- <button type="warn"> --><navigator :url="`/pages/log/log?msg=${(inputValue)}`">组件跳转</navigator><!-- </button> --></view></view>
</template><script lang="ts" setup>import { onMounted, ref } from 'vue';const inputValue = ref('');onMounted(() => {})const navigaToLog = () => {console.log(inputValue.value);uni.navigateTo({//'/pages/log/log?msg='+inputValue.valueurl: `/pages/log/log?msg=${(inputValue.value)}`,fail: (err) => {console.log(err)}});}
</script>

log.vue

<template><view class=".text-area"><text>log界面接收:{{ msg }}</text></view><view class="button-container"><!-- <button @click="switchTabtiaozhuan">switchTab跳转到关于页面</button> --><button type="warn" @click="navigaToLogin">去登录1</button></view><view class="button-container"><!-- <button @click="switchTabtiaozhuan">switchTab跳转到关于页面</button> --><button type="primary" @click="switchTabTo">去登录2</button></view></template><script setup>import {onLoad} from '@dcloudio/uni-app';import {ref} from 'vue';// const modelValue = defineModel("modelValue");const msg = ref("");onLoad((options) => {console.log(options.msg);msg.value = options.msg;});const navigaToLogin = () => {uni.navigateTo({url: '/pages/login/login',fail: (err) => {console.log(err)}});}const switchTabTo = () => {uni.switchTab({url: '/pages/login/login',fail: (err) => {console.log(err)}});}</script>

使用pinia

关于uni-app内置pinia的问题

https://ask.dcloud.net.cn/question/194066

安装不了pinia的试试

报错信息

  1. 升级vue npm install vue@3.4.31npm install pinia

  2. 降级pinianpm install pinia@2.0.35执行以下命令看看所有pinia 版本挑着试试npm view pinia versions

  • 导入pinia

  • 创建store 在src下新建index.ts

import { createPinia, defineStore } from 'pinia';
const pinia =createPinia();export const useCounterStore = defineStore('storeWX', {state: () => {return {openId: "",nickName: "尚未登录",};},// 也可以这样定义// state: () => ({ count: 0 })});

再回到main.ts

使用pinia

登录

准备工作

https://mp.weixin.qq.com/

自己注册一个小程序登录的Api

uni.login(OBJECT) | uni-app官网 (dcloud.net.cn)

可以写代码了

login.vue

<template><view><view><text style="font-size: 19px;" >用户昵称：{{storeWX.nickName}}</text><image :src="url" style=" width:200px; height: 200px; background-image: url(../../static/jingli.png);"></image></view><button type="primary" @click="wechatLogin">微信登录</button></view>
</template><script setup lang="ts">import { ref } from 'vue';import { useCounterStore } from '../../store/index';const nickName = ref("");const storeWX = useCounterStore();const url = ref("");const wechatLogin = () => {uni.login({"provider": "weixin","onlyAuthorize": true, // 微信登录仅请求授权认证success: function (event) {const { code } = event//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。uni.request({url: 'http://localhost:8080/api/wechat/openid', //仅为示例，并非真实接口地址。data: {code: code},success: (res) => {//获得token完成登录console.log(res.data);storeWX.openId=res.data.openid;console.log(storeWX.openId);// uni.setStorageSync('token',res.token)uni.getUserInfo({provider: 'weixin',success: function (infoRes) {nickName.value = infoRes.userInfo.nickName;url.value = infoRes.userInfo.avatarUrl;storeWX.nickName=infoRes.userInfo.nickName;// storeWx.avatarUrl=infoRes.userInfo.avatarUrl,console.log(infoRes)}});}});},fail: function (err) {// 登录授权失败// err.code是错误码}})}
</script>

@RestController
@RequestMapping("/api/wechat")
public class WeChatController {private final  String appid ="你的appid";private final  String secret ="你的秘钥";@GetMapping("/openid")public JSONObject getOpenId(@RequestParam String code){String url="https://api.weixin.qq.com/sns/jscode2session?appid="+appid+"&secret="+secret+"&js_code="+code+"&grant_type=authorization_code";String s = HttpUtil.get(url);JSONObject entries = JSONUtil.parseObj(s);return entries;}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/435241.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【RocketMQ】SpringBoot整合RocketMQ

【RocketMQ】SpringBoot整合RocketMQ

&#x1f3af; 导读&#xff1a;本文档详细介绍了如何在Spring Boot应用中集成Apache RocketMQ&#xff0c;并实现消息生产和消费功能。首先通过创建消息生产者项目&#xff0c;配置POM文件引入RocketMQ依赖&#xff0c;实现同步消息发送&#xff0c;并展示了如何发送普通字符串…
阅读更多...
02-指针代码示例

02-指针代码示例

视频地址&#xff1a; 数组作为函数参数_哔哩哔哩_bilibili 指针是一个变量,用来存放其他变量的地址. 一、语法角度说: 需要用整形变量的指针,去存储一个整形变量的地址. 二、代码部分: (一) 1.指针赋值 int main(int argc, const char* argv[]) {int a;int* p;//这里要…
阅读更多...
召回12 曝光过滤 Bloom Filter

召回12 曝光过滤 Bloom Filter

在推荐系统中&#xff0c;如果用户看过某个物品&#xff0c;就不再把物品推荐给这个用户。小红书、抖音都这样做曝光过滤&#xff0c;原因是实验表明重复曝光同一个物品会损害用户体验。但也不是所有推荐系统都有曝光过滤&#xff0c;像 YouTube 这样的长视频就没有曝光过滤&am…
阅读更多...
游戏如何对抗改包

游戏如何对抗改包

游戏改包是指通过逆向分析手段及修改工具&#xff0c;来篡改游戏包内正常的设定和规则的行为&#xff0c;游戏包被篡改后&#xff0c;会被植入/剔除模块进行重打包。 本期图文我们将通过实际案例分析游戏改包的原理&#xff0c;并分享游戏如何应对改包问题。 安卓平台常见的改…
阅读更多...
甄选范文“论软件的可靠性设计”，软考高级论文，系统架构设计师论文

甄选范文“论软件的可靠性设计”，软考高级论文，系统架构设计师论文

论文真题 现代军事和商用系统中，随着系统中软件成分的不断增加，系统对软件的依赖性越来越强。软件可靠性已成为软件设计过程中不可或缺的重要组成部分。实践证明，保障软件可靠性最有效、最经济、最重要的手段是在软件设计阶段采取措施进行可靠性控制，由此提出了可靠性设计…
阅读更多...
chsharp文件如何查找在unity中使用的 位置？

chsharp文件如何查找在unity中使用的 位置？

在 Unity 中&#xff0c;C 脚本文件&#xff08;.cs 文件&#xff09;被用于控制游戏对象的行为。要查找某个 C 文件在 Unity 项目中被使用的位置&#xff0c;你可以通过以下几种方法&#xff1a; 1. 查找依赖项&#xff08;References&#xff09; Unity 提供了一个工具&#…
阅读更多...
Vue开发前端图片上传给java后端

Vue开发前端图片上传给java后端

前端效果图 图片上传演示 1 前端代码 <template><div><!-- 页面标题 --><h1 class"page-title">图片上传演示</h1><div class"upload-container"><!-- 使用 van-uploader 组件进行文件上传&#xff0c;v-model 绑…
阅读更多...
高并发内存池（六）：补充内容

高并发内存池（六）：补充内容

目录 有关大于256KB内存的申请和释放处理方法 处理大于256KB的内存申请 补充内容1 补充内容2 补充内容3 处理大于256KB的内存释放 新增内容1 新增内容2 测试函数 使用定长内存池替代new 释放对象时不传对象大小 补充内容1 补充内容2 补充内容3 补充内容4 测试…
阅读更多...
【从0开始自动驾驶】用python做一个简单的自动驾驶仿真可视化界面

【从0开始自动驾驶】用python做一个简单的自动驾驶仿真可视化界面

【从0开始自动驾驶】用python做一个简单的自动驾驶仿真可视化界面 废话几句废话不多说&#xff0c;直接上源码目录结构init.pysimulator.pysimple_simulator_app.pyvehicle_config.json 废话几句 自动驾驶开发离不开仿真软件成品仿真软件种类多https://zhuanlan.zhihu.com/p/3…
阅读更多...
推荐4款2024年热门的PDF转ppt工具

推荐4款2024年热门的PDF转ppt工具

有时候&#xff0c;我们为了方便&#xff0c;需要将PDF里面的内容直接转换的PPT的格式&#xff0c;既方便自己演示和讲解&#xff0c;也让我们可以更加灵活的进行文件的编辑和修改。如果大家不知道要如何进行操作的话&#xff0c;我可以为大家推荐几个比窘方便实用的PDF转换工具…
阅读更多...
UnityComputeShader Challenge1

UnityComputeShader Challenge1

UnityComputeShader Challenge1 using UnityEngine; using System.Collections;public class Challenge1 : MonoBehaviour {//editor拖拽对应的 compute文件public ComputeShader shader;//纹理的大小public int texResolution 1024;//着色器Renderer rend;//用于存储计算输出…
阅读更多...
“国家高新”与“专精特新”企业的对比分析

“国家高新”与“专精特新”企业的对比分析

近年来&#xff0c;企业经常听到“专精特新”和“高新技术”这两个热词。部分企业对于“专精特新”与“高新技术”之间的联系与区分却不够明确&#xff0c;其实二者之间既有重叠&#xff0c;又有模糊。“专精特新”和“高新技术”都是高技术、高核心竞争力的标志&#xff0c;都…
阅读更多...
Excel提取数据

Excel提取数据

Excel提取数据 在使用Excel的过程中&#xff0c;我需要将带有评语的评分的文本内容提取出评分&#xff0c;如下所示 其中分数与文本之间用空格分隔&#xff0c;只有分数的评语会自动靠右对齐&#xff0c;我需要做的就是将B列的评语从中提取出分数放到C列中&#xff0c;以下为实…
阅读更多...
【Linux第五课-进程上】PCB内部属性、标识符、进程状态、Linux下的进程状态、进程的优先级、Linux进程的调度与切换

【Linux第五课-进程上】PCB内部属性、标识符、进程状态、Linux下的进程状态、进程的优先级、Linux进程的调度与切换

目录 体系结构 -- 硬件上操作系统 -- 软件上进程PCB内部属性1、在linux里面看程序2、标识符获取程序的标识符父进程标识符 PPID查看进程的另一种方法通过系统调用创建进程 - fork杀掉一个进程for循环创建多个代码 3、进程状态进程排队 - 队列教程上关于进程状态表述运行阻塞&am…
阅读更多...
【Android 14源码分析】Activity启动流程-2

【Android 14源码分析】Activity启动流程-2

忽然有一天&#xff0c;我想要做一件事&#xff1a;去代码中去验证那些曾经被“灌输”的理论。                                                                                  – 服装…
阅读更多...
PingCastle：一款针对活动目录AD的安全强化工具

PingCastle：一款针对活动目录AD的安全强化工具

关于PingCastle PingCastle是一款针对活动目录AD的安全强化工具&#xff0c;可以帮助广大研究人员提升活动目录的安全性&#xff0c;该工具甚至可以做到在 20% 的时间内实现 80% 的AD安全性。 Ping Castle 是一种旨在使用基于风险评估和成熟度框架的方法快速评估活动目录AD 安…
阅读更多...
pywinauto，一款Win自动化利器！

pywinauto，一款Win自动化利器！

1.安装 pywinauto是一个用于自动化Python模块&#xff0c;适合Windows系统的软件&#xff08;GUI&#xff09;&#xff0c;可以通过Pywinauto遍历窗口&#xff08;对话框&#xff09;和窗口里的控件&#xff0c;也可以控制鼠标和键盘输入&#xff0c;所以它能做的事情比之前介…
阅读更多...
大数据实时数仓Hologres（一）：Hologres 简单介绍

大数据实时数仓Hologres（一）：Hologres 简单介绍

文章目录 Hologres 简单介绍 一、什么是实时数仓 Hologres 二、产品优势 1、专注实时场景 2、亚秒级交互式分析 3、统一数据服务出口 4、开放生态 5、MaxCompute查询加速 6、计算存储分离架构 三、应用场景 搭建实时数仓 四、产品架构 1、Shared Disk/Storage &am…
阅读更多...
Appium独立测试自动化初始化脚本

Appium独立测试自动化初始化脚本

1、查看环境初始化参数 确保appium已经开起来了&#xff0c;设置ip ,并点击启动 打开夜神模拟器&#xff0c;点击工具--设置 最下面的版本说明&#xff0c;双击进去 版本号这里再去单击。 直到进入到开发者模式。 可能我们不是开发者模式打开的状态&#xff0c;所以软件访问模…
阅读更多...
我摊牌了！！程序员不卷了，AI大模型先转一步!

我摊牌了！！程序员不卷了，AI大模型先转一步!

计算机行业小伙伴儿们的归宿到底在哪里啊&#xff1f; 互联网和程序员的风口已经过去了&#xff0c;作为一名大龄程序员&#xff0c;在继续卷和转型发展之间我选择了转行AI大模型。 4年更火的无非就是人工智能了&#xff0c;大家在招聘网站也可以看到名种各样的offer&#x…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023