uniapp学习(005-2 详解Part.2)

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战,开发打包微信小程序、抖音小程序、H5、安卓APP客户端等

总时长 23:40:00 共116P

此文章包含第41p-第p51的内容


文章目录

mainifest.json文件配置

获取微信小程序appid

在微信小程序里需要设置appid才可以使用预览和真机调试等功能

这个appid需要去微信公众平台进行获取

注册微信小程序

个人和企业都可以进行注册

ps:邮箱如果注册过公众号是无法注册小程序的 需要换一个(同一个邮箱取别名可以再次注册)

微信小程序控制台

注册完成后

可以添加成员 添加后 这个人可以使用这个appid

这里勾选 使用代码压缩,因为小程序最多不能超过2MB

图形界面和源码界面可以相互影响

vue.config.js和vite.config.js

这里我们使用vue3 所以我们使用vite.config.js
(vite编译速度比webpack要快。webpack让项目完整编译后才运行。vite运行那个页面,就编译那个页面。vite类似路由里面的懒加载)

使用vite.config.js 可以同一管理 vue的组件和uniapp的组件,每个页面引入的这个删掉进行同一管理

实现vue模块的自动导入

引用链接:
开发uniapp使用Vue3组合式API版本,如何实现从vue模块中自动导入

如果没安装过nodejs 需要下载并安装nodejs才可以使用npm命令

安装完以后运行命令

使用命令行窗口打开目录

多出一个文件夹

创建一个新文件vite.config.js

自动导入模块AutoImport(个人不建议使用这个插件。还是在页面里引用import比较好)

命令npm i 可以自动导入需要的一些包

弹窗API

showToast 消息提示框


效果

字多的时候 小程序需要把icon设置成none才可以自动换行,否则最多7个字
可以自定义图标
mask为true的时候 会阻止其他操作 等提示框消失后才可以操作
可以设置成功、失败、无论成败后都会调用的方法
可以快速隐藏
跳转tabBar页面

不可以直接使用navigateTo

可以使用reLaunch跳转

showLoading 加载框

加载中的时候 不可以操作后面的东西 所以mask为true

隐藏loading

失败的时候 在请求那里也可以设置隐藏

showModal m模态提示框

颜色样式文字
可以打开输入框 可以用于输入验证码等信息


showActionSheet底部弹出菜单


点击效果 返回的是索引值

setNavigationBarTitle 动态设置当前页面标题

页面切换的时候 标题也是变化的

可以在标题旁边添加loading 和隐藏loading

hideHomeButton 隐藏返回首页按钮

仅微信小程序和京东小程序支持



setTabBarBadge 设置tabBar角标

在App.vue的onLaunch里设置,这样是全局都可以看到

removeTabBarBadge 删除tabBar的角标

showTabBarRedDot 设置tabBar红点


hideTabBarRedDot 隐藏tabBar红点

onPullDownRefresh下拉刷新处理函数

startPullDownTefresh

关闭下拉刷新

页面和路由API

跳转的两种方式,

1. 使用navigator标签跳转

2. 使用js代码块进行跳转

可以带参数

可以看到小程序的参数

onLoad里可以看到参数

tabBar页面无法直接跳转 需要改成 reLaunch


可以看到当前返回了几页

这里可以看出我们打开了两个页面

一个压在另一个

数据缓存API

setStorage 缓存数据到本地 setStorageSync 同步缓存数据到本地

这里的搜索记录就是前端的缓存

同步缓存 异步缓存

异步容易回调地狱,这里我们使用同步

使用同步




小程序里查看

getStorage 得到缓存数据到本地 getStorageSync 同步得到缓存数据到本地

getStorageInfoSync打印全部的storage的key
removeStorageSync 删除某个缓存
clearStorageSync清除所有缓存

相关推荐
伍哥的传说4 分钟前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_4244091911 分钟前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
2501_9159184113 分钟前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
说私域1 小时前
从品牌附庸到自我表达:定制开发开源AI智能名片S2B2C商城小程序赋能下的营销变革
人工智能·小程序
難釋懷1 小时前
第一个小程序
小程序
春哥的研究所1 小时前
可视化DIY小程序工具!开源拖拽式源码系统,自由搭建,完整的源代码包分享
小程序·开源·开源拖拽式源码系统·开源拖拽式源码·开源拖拽式系统
weixin_lynhgworld1 小时前
盲盒一番赏小程序技术实现方案:高并发与防作弊的平衡之道
小程序
01传说2 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
不知名It水手2 小时前
uniapp运行项目到ios基座
ios·uni-app·cocoa
hunzi_12 小时前
搭建商城系统
java·uni-app·php