UniApp
uni-app工作中几乎必遇到的组件和解决方案,让你少走几年弯路。
gblfy
心如向阳,次第花开!
展开
-
uniapp 实现不同用户展示不同的tabbar(底部导航栏)
uniapp 实现不同用户展示不同的tabbar(底部导航栏)原创 2023-12-02 14:35:42 · 2512 阅读 · 2 评论 -
2022年技术胖私藏工具分享
2022年技术胖私藏工具分享原创 2022-11-02 21:42:07 · 1810 阅读 · 0 评论 -
uniapp获取微信头像和昵称
uniapp获取微信头像和昵称原创 2022-07-05 13:09:03 · 2624 阅读 · 0 评论 -
uni-app 子组件调用父组件的方法(vue同样适用)
uni-app 子组件调用父组件的方法(vue同样适用)原创 2022-07-04 11:26:42 · 10166 阅读 · 0 评论 -
HBuilder X 常用的快捷键
HBuilder X 常用的快捷键原创 2022-07-04 10:05:36 · 6185 阅读 · 0 评论 -
uniapp 引入iconfont的方法
uniapp 引入iconfont的方法原创 2022-06-28 11:21:22 · 3096 阅读 · 2 评论 -
uni-app使用canvas绘制二维码
uni-app使用canvas绘制二维码原创 2022-06-26 09:22:23 · 554 阅读 · 0 评论 -
uniapp 制作手机app程序, 使用uni.chooseVideo录制视频,视频播放模糊分辨率低的原因
视频播放模糊分辨率低的原因原创 2022-06-24 22:50:03 · 2848 阅读 · 0 评论 -
uni-app单个页面的生命周期函数
除了整体应用的生命周期,每一个页面都有自己的生命周期我们先来看看代码<script> export default { data() { return { title: 'Hello' } }, onLoad(optins) { console.log('页面加载完成',optins); }, onShow() { console.log('页面显示'); }, onReady() { console.lo原创 2022-02-19 19:57:06 · 1581 阅读 · 0 评论 -
移动端 uniapp 国际化一站式解决方案
菜单、表单、tabbar+顶部文字均实现国际化,语言种类一次设置,全局生效,支持几十种,也支持私人定制。文章目录一、效果图+开源项目1. 默认中文2. 切换English3. 切换韩语4. 中文繁体5. 开源项目一、效果图+开源项目1. 默认中文2. 切换English3. 切换韩语4. 中文繁体5. 开源项目https://gitee.com/gblfy/uniapp-i18n-lang...原创 2022-02-19 19:53:46 · 1025 阅读 · 2 评论 -
uniapp使用vue-i18n实现语言国际化
1.需要去vue-i18n官网下载js文件https://unpkg.com/vue-i18n@8.21.0/dist/vue-i18n.js2.将js文件下载后放置在创建的lang文件夹中3.紧接着创建需要翻译的配置文件如zh.js(中文)、en.js(英文)、tcc.js(繁体)且配置需要翻译的字段zh.js(中文)export default { index: { title: '首页', game: '游戏', bas: '背景音乐' }}en.js(英文)ex原创 2022-02-19 12:42:39 · 1013 阅读 · 1 评论 -
uniapp中配置语言切换功能(vue-i18n的安装以及使用)
1.安装npm install vue-i18n --save2. 新建lang文件以及en.json和zh.json文件,其他语言参考创建即可 3. 在main.js中配置 4. 在页面中使用原创 2022-02-19 12:30:57 · 879 阅读 · 1 评论 -
移动端uniapp 语言国际化vue-i18n
https://gitee.com/gblfy/uniapp-i18n原创 2022-02-19 12:24:37 · 295 阅读 · 0 评论 -
在uni-app中使用vant-weapp
https://ext.dcloud.net.cn/plugin?id=100原创 2022-01-05 13:27:00 · 1223 阅读 · 14 评论 -
腾讯位置服务地图选点这个怎么在小程序里面更新呀?
修改versionhttps://developers.weixin.qq.com/miniprogram/dev/framework/plugin/using.html原创 2022-01-05 11:14:43 · 298 阅读 · 0 评论 -
nginx绑定多个端口
有两种方法:一、在server段写上2个Listen就可以了.listen 192.168.0.15:808;listen 192.168.0.15:8098;如上,就可以同时监听2个端口了.二、在 nginx.conf 中配置多个个server即可worker_processes 1;events { worker_connections 1024;}http { include mime.types; default_type appli原创 2022-01-04 12:35:50 · 15147 阅读 · 4 评论 -
uniapp H5页面打包发布
文章目录1. 打开 `HBuilder`2. 打开项目3. 点击发行4. 等待项目编译5. 查看路径6. 安装7. 启动1. 打开 HBuilder2. 打开项目打开当前要打包的项目3. 点击发行,找到【网站 - PC web 或手机 H5 】确认【网站标题】,无需【网站域名】,直接点击发行即可4. 等待项目编译5. 查看路径编译成功后,项目会被导出到指定路径找到该路径下的文件,即为【打包后的项目】彩蛋:本地玩耍技巧6. 安装注意: 不可直接打开 index.html原创 2022-01-03 20:55:33 · 1707 阅读 · 1 评论 -
uniapp 微信小程序打包发布
文章目录一、打包小程序1. HBuilder X打包2. 小程序发行3. 点击上传4. 扫码体验5. 正式版本一、打包小程序1. HBuilder X打包选中项目-点击发行(U)- 小程序-(微信仅适用于uniapp)(W)2. 小程序发行填写微信小程序名称和微信小程序Appid点击发行项目会进入编译中编译完成后,回启动微信开发者工具3. 点击上传4. 扫码体验使用小程序账号扫码:登录微信公众号平台5. 正式版本再次提交审核即可,审核通过后,就可以去微信中去原创 2022-01-03 20:39:03 · 2368 阅读 · 4 评论 -
微信小程序之实现地图定位(使用腾讯位置服务插件)
文章目录一. 腾讯位置服务插件简介1. 完整的地图能力2. 地图插件的优势二. 开通腾讯位置服务三、接入插件四、 开发者密钥配置五、插件的使用一. 腾讯位置服务插件简介1. 完整的地图能力腾讯位置服务基于微信提供的小程序插件能力,专注于(围绕)地图功能,打造一系列小程序插件,可以帮助开发者简单、快速的构建小程序,是实现地图功能的最佳伙伴。目前腾讯位置服务提供 路线规划、地图选点、地铁图 三款插件产品,本篇博客主要针对地图选点功能进行实现。路线规划:提供地图路线规划功能。根据起终点,智能规划驾车、.原创 2022-01-03 16:20:19 · 8893 阅读 · 2 评论 -
微信小程序+腾讯地图 获取定位与地图选点插件
文章目录一、思路二、逆地址解析2.1. app.json2.2. 页面加入2.3. 后台代码三、地图插件调用3.1. app.json加入3.2. js页面加入3.3. wxml页面成功截图:腾讯位置服务官网:https://lbs.qq.com一、思路通过 wx.getLocation 返回经纬度传到后台,后台调用腾讯地图提供的逆地址解析返回用户位置;给个按钮让用户点击调用腾讯地图选点插件,自己选择位置修改二、逆地址解析2.1. app.json.小程序页面代码app.json必须加.原创 2022-01-03 15:52:48 · 9599 阅读 · 1 评论 -
uniapp 用户登录
文章目录一、登录基础1. 登录组件2. 页面引用组件3. 明确登录的实现思路4. 封装 action 调用登录接口5. 保存用户登录状态6. 成已登录的用户视图6. 现退出登录功能一、登录基础1. 登录组件对于 登录 功能来说提供了两个登录的入口。那么大家想一下,现在我们已经在 我的 这个 tab页 中实现了 登录的 UI,难道我还需要在另外一个页面中再去实现一遍吗?这个肯定是不需要的对不对。所以我们希望可以复用登录的 UI,而复用的方式则可以把 登录的 UI 封装称为一个 组件创建登录组件原创 2022-01-03 10:52:20 · 9943 阅读 · 2 评论 -
状态管理 - 全局状态管理工具
文章目录一、单向数据流1. 理念示意图2. 简述二、什么是全局状态管理模式三、重点概念3.1. 什么是全局状态管理模式?3.2.全局状态管理工具?3.3. 什么是 vuex四、在项目中导入 vuex4.1. 状态管理配置4.2. 注册vuex五、测试 vuex 是否导入成功5.1. 创建搜索模块5.2. 注入模块5.3. 页面使用模块中的数据5.4. 构建 search 模块5.5. 对vuex数据操作六、vuex数据持久化6.1. 搜索模块数据持久化6.2. 搜索api6.3. 页面使用一、单向原创 2022-01-03 10:36:18 · 965 阅读 · 0 评论 -
uniapp 封装网络请求
文章目录一、前端1. 封装网络请求2. 封装模块请求方法二、后端2.1. 返回对象2.2. 热搜接口三、微信模拟请求3.1. Network3.2. Console一、前端1. 封装网络请求创建 utils 文件夹创建 request.js ,封装请求对象// const BASE_URL = 'https://api.imooc-blog.lgdsunday.club/api';const BASE_URL = 'http://127.0.0.1:8080';function reque原创 2022-01-03 10:06:44 · 1037 阅读 · 0 评论 -
uniapp 创建与配置 tabbar
1. 创建页面删除 pages 下的 index 文件夹在 pages 文件夹处,右键 -> 选择新建页面确认新建页面的信息由于咱们删除了默认的index.vue页面,导致编译报错找到pages.json文件,把鼠标选中部分配置删除即可2. 配置 pages.json删除 index 路径(这一步咱们上面已经做了)新建 tabbar 节点复制 图标资源 文件夹下 tab-icons 文件夹到 static 文件夹中这个需要自己去图标网站下载..原创 2022-01-03 09:49:53 · 1075 阅读 · 0 评论 -
使用 VSCode 开发 uniapp
虽说 HBuilder X 开发体验还算不错,但是有时候金窝银窝不如自己的狗窝,当我们习惯了 VSCode 之后,有时候不太愿意换开发工具。那么怎么使用 VSCode 来开发 uniapp 呢? 其实是有办法的。使用 HBuilder X 运行项目使用 VSCode 打开项目在 VSCode 中安装插件:uni-helper - 让开发者在 VSCode 中开发 uni-* 的体验尽可能好。uni-app-snippets - 支持 uni-app 基本能力的代码片段,包括组件和 APIu原创 2022-01-03 09:30:45 · 5050 阅读 · 0 评论 -
[sitemap 索引情况提示] 根据 sitemap 的规则[0],当前页面 [pages/index/index] 将被索引
[sitemap 索引情况提示] 根据 sitemap 的规则[0],当前页面 [pages/index/index] 将被索引微信小程序默认开启了索引功能,但是因为我们没有配置索引策略,导致出现了这么一个警告的问题。具体情况可以参考:https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html而如果想要解决这个警告也非常简单,因为一般情况项目不需要被微信索引,所以我们只需要 关闭 默认索引功能即可!双击打开 man原创 2022-01-03 09:25:52 · 1345 阅读 · 0 评论 -
Cannot read property ‘forceUpdate‘ of undefined
文章目录现象解决方案现象VM46 WAService.js:2 TypeError: Cannot read property ‘forceUpdate’ of undefined解决方案解决 Cannot read property 'forceUpdate' of undefined 的错误这个错误的原因非常简单,是因为我们没有为项目配置 appID 的原因,所以只需要完成 APPID 配置即可。双击打开 manifest.json找到【微信小程序配置】配置前配置后错误异原创 2022-01-03 09:21:42 · 5139 阅读 · 0 评论 -
uni-app 微信小程序授权登录
文章目录一、appID相关申请和配置1. appid获取方式2. appID配置二、获取用户基础数据2.1. 获取用户信息2.2. 获取用户信息2三、调用登录api3.1. 登录api3.2. 案例代码四、获取唯一标识信息4.1. 官网文档4.2. 接口简述五、绑定用户 实现登录5.1. 代码案例(未封装)5.2. 代码案例(封装)一、appID相关申请和配置1. appid获取方式登录微信公众平台官网链接:https://mp.weixin.qq.com/第一次需要小伙伴们点击注册按钮,.原创 2022-01-02 22:22:03 · 11606 阅读 · 8 评论 -
uniapp 开发基础环境搭建和配置
文章目录一、下载并安装开发工具1. 官网下载2. 点击 `DOWNLOAD`3. 版本选择二、安装 `sass` 依赖2.1. 打开 `HBuilder X`2.2. 打开插件地址2.3. 导入插件2.4. 在弹出框中点击2.5. 点击【是】2.6. 下载状态2.7. 等待完成即可三、创建 uni-app 项目3.1. 创建项目3.2. 项目目录介绍一、下载并安装开发工具1. 官网下载HBuilder X下载2. 点击 DOWNLOAD3. 版本选择选择 App 开发版本windows 版原创 2022-01-03 08:58:32 · 1742 阅读 · 0 评论