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

莱莱  金牌会员 | 2024-10-14 00:33:00 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题

主题 838|帖子 838|积分 2514

零底子入门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



返回上一页 navigateBack


可以看到当前返回了几页



这里可以看出我们打开了两个页面
一个压在另一个


数据缓存API

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


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

同步缓存 异步缓存

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

使用同步





小程序里查看

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


getStorageInfoSync打印全部的storage的key



removeStorageSync 删除某个缓存


clearStorageSync扫除所有缓存




免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

莱莱

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表