HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

process.env.TZ = 'Asia/Shanghai'在云函数里无法成功设置

所以涉及到时间的转换,最好在前端,云端0时区太蛋疼了

所以涉及到时间的转换,最好在前端,云端0时区太蛋疼了

项目简要 uniapp 框架会员移动网页客户端

外包

项目简要
uniapp框架会员移动网页客户端

工作要求

  1. 增加功能, 优化和长期维护.
  2. 迁移 uniapp vue2 到 vue3.

开发者要求:
全职独立开发者, 谢绝团队.
至少2年 uniapp 项目开发经验.
至少1年 typescript 项目开发经验.
熟悉或使用过 thorui 优先.
有 迁移 uniapp vue2 到 vue3 的项目经验优先
使用过Gitflow
具备英文读写能力.

三,待遇:

  1. 基本底薪,月结 (考虑到接任何项目如果想提升代码质量,都需要熟悉,需要能优化,模块化代码)
  2. 底薪之外,按页面和功能付钱,多劳多得.
继续阅读 »

项目简要
uniapp框架会员移动网页客户端

工作要求

  1. 增加功能, 优化和长期维护.
  2. 迁移 uniapp vue2 到 vue3.

开发者要求:
全职独立开发者, 谢绝团队.
至少2年 uniapp 项目开发经验.
至少1年 typescript 项目开发经验.
熟悉或使用过 thorui 优先.
有 迁移 uniapp vue2 到 vue3 的项目经验优先
使用过Gitflow
具备英文读写能力.

三,待遇:

  1. 基本底薪,月结 (考虑到接任何项目如果想提升代码质量,都需要熟悉,需要能优化,模块化代码)
  2. 底薪之外,按页面和功能付钱,多劳多得.
收起阅读 »

uniapp框架 外包 | 长期开发和维护项目1

项目简要
项目是跨小程序, H5, APP, CRM APP 包括推广营销和独立外卖.

开发者要求:

  1. 全职独立开发者, 谢绝团队.
  2. 有 uniapp 项目开发经验
  3. 熟悉 Git 和 Gitflow
  4. 拥有较强的学习能力,良好的沟通与理解能力及逻辑思维能力
    5.l联系方式微信18872319732 邮箱xuqu911@126.com
继续阅读 »

项目简要
项目是跨小程序, H5, APP, CRM APP 包括推广营销和独立外卖.

开发者要求:

  1. 全职独立开发者, 谢绝团队.
  2. 有 uniapp 项目开发经验
  3. 熟悉 Git 和 Gitflow
  4. 拥有较强的学习能力,良好的沟通与理解能力及逻辑思维能力
    5.l联系方式微信18872319732 邮箱xuqu911@126.com
收起阅读 »

uni-app npm update 更新项目后报错

uni-app npm update 更新项目后报错 internal/modules/cjs/loader.js:596
并:throw err:
Cannot find module '@dcloudio/uni-cli-i18n';
巴拉巴拉等
直接npm下载对应缺失的包就行了
npm i @dcloudio/uni-cli-i18n
再重新运行就可以了

继续阅读 »

uni-app npm update 更新项目后报错 internal/modules/cjs/loader.js:596
并:throw err:
Cannot find module '@dcloudio/uni-cli-i18n';
巴拉巴拉等
直接npm下载对应缺失的包就行了
npm i @dcloudio/uni-cli-i18n
再重新运行就可以了

收起阅读 »

从评论页面返回后实时刷新评论总数的实现

返回刷新 评论 uniapp

场景:从列表页点击评论按钮,进入评论页面,评论后返回列表页,希望被点击的列表项评论总数实时更新。

实现方法:

列表页template 中伪代码如下:

<view v-for(省略)>  
    <view @click="to_comment(item.post_id, item.id, index)">发表评论</view>  
</view>

onShow 中:

let index = uni.getStorageSync('index');  
let comment_count = uni.getStorageSync('comment_count');  
if (this.record_list.length != 0) {  
    this.record_list[index].comment_count = comment_count;  
}

methods中:

to_comment(post_id, o_user_id, index){  
    uni.setStorageSync('index', index);  
    uni.navigateTo({  
        url: '../comment/comment?post_id=' + post_id + '&o_user_id=' + o_user_id  
    })  
},

评论页面:

onLoad (){  
    this.get_comment_list()  
},  

methods: {  
    get_comment_list() {  
        uni.setStorageSync('comment_count', this.comment_list.comment_count)    //当不评论时,将评论总数缓存  
    },  
    comment(){  
        uni.setStorageSync('comment_count', this.comment_list.comment_count)    //如果有评论,更新缓存  
    }  
}

效果:可实现评论总数的实时更新,并且不用全页面刷新

继续阅读 »

场景:从列表页点击评论按钮,进入评论页面,评论后返回列表页,希望被点击的列表项评论总数实时更新。

实现方法:

列表页template 中伪代码如下:

<view v-for(省略)>  
    <view @click="to_comment(item.post_id, item.id, index)">发表评论</view>  
</view>

onShow 中:

let index = uni.getStorageSync('index');  
let comment_count = uni.getStorageSync('comment_count');  
if (this.record_list.length != 0) {  
    this.record_list[index].comment_count = comment_count;  
}

methods中:

to_comment(post_id, o_user_id, index){  
    uni.setStorageSync('index', index);  
    uni.navigateTo({  
        url: '../comment/comment?post_id=' + post_id + '&o_user_id=' + o_user_id  
    })  
},

评论页面:

onLoad (){  
    this.get_comment_list()  
},  

methods: {  
    get_comment_list() {  
        uni.setStorageSync('comment_count', this.comment_list.comment_count)    //当不评论时,将评论总数缓存  
    },  
    comment(){  
        uni.setStorageSync('comment_count', this.comment_list.comment_count)    //如果有评论,更新缓存  
    }  
}

效果:可实现评论总数的实时更新,并且不用全页面刷新

收起阅读 »

不能更新最新版本3.2.9,更新后小程序模拟器的手机语言变成英文,导致组件国际化也变成英文,回退版本才好了

不能更新最新版本3.2.9,更新后小程序模拟器的手机语言变成英文,导致组件国际化也变成英文,回退版本才好了

不能更新最新版本3.2.9,更新后小程序模拟器的手机语言变成英文,导致组件国际化也变成英文,回退版本才好了

基于uniapp开发的小说阅读器 前后端源码

java uniapp模板 源码分享

前端:uniapp
首页缓存、图片缓存、收藏缓存、阅读记录、阅读历史缓存;
后端:java springboot
redis缓存、knife4j(Swagger UI升级版)接口预览、webmagic小说数据爬取、支持TXT全本导入
管理系统:
vue2 全家桶框架管理系统

所有源码和数据库: ¥800
加我V: zwb584223358 发邮箱号

继续阅读 »

前端:uniapp
首页缓存、图片缓存、收藏缓存、阅读记录、阅读历史缓存;
后端:java springboot
redis缓存、knife4j(Swagger UI升级版)接口预览、webmagic小说数据爬取、支持TXT全本导入
管理系统:
vue2 全家桶框架管理系统

所有源码和数据库: ¥800
加我V: zwb584223358 发邮箱号

收起阅读 »

uni-app提供开箱即用的SSR支持

ssr 服务端渲染 SEO

SSR(服务端渲染)可以给SPA站点带来两大核心优势:

  • 更好的SEO
  • 更快的首屏渲染

很多uni-app开发者都在积极尝试SSR,但大多没入门就放弃了,原因在于SSR颇高的技术门槛。

vue.js 官网在介绍 SSR 章节时的描述如下:

本指南将会非常深入,并且假设你已经熟悉 Vue.js 本身,并且具有 Node.js 和 webpack 的相当不错的应用经验。

故很多uni-app开发者在社区中呼吁DCloud官方提供更为简洁、开箱即用的 uni-app SSR 方案。

uni-app团队近期在完成 vue 3.0 的全平台升级后,基于vue 3.0 + uniCloud,发布了开箱即用的 SSR 支持,我们称其为uniCloud版SSR

这是一个uniCloud版的SSR示例:news.dcloud.io是基于uni-app & uniCloud 开发的新闻系统。通过审查元素会发现,新闻列表数据包含在服务端下发的源码中,而不是客户端Ajax请求所得。

uniCloud版的SSR实现的较为简单,且和HBuilderX做了深度集成,你可以按照如下步骤快速上手:

步骤一:调整代码适配服务端运行环境

  1. 生命周期:uni-app的生命周期钩子函数中,页面onLoad、组件beforeCreatecreated 会在服务器端渲染 (SSR) 过程中被调用,你需要检查原项目代码中获取数据的时机;
  2. 特定平台API:若直接使用了如 windowdocument,这类仅浏览器支持的全局变量,则会在云端 Node.js 中执行时抛出错误;
  3. 数据预取:<uniCloud-db>组件天然支持SSR,无需调整代码,推荐使用<uniCloud-db>查询数据库。如果你未使用<uniCloud-db>组件,则可使用serverPrefetch来实现服务器端数据获取,使用@dcloudio/uni-app提供的ssrRef或Vue.js官方的Vuex来实现状态同步;

更多详细信息及示例代码,参考:https://uniapp.dcloud.net.cn/collocation/ssr

步骤二:编译发行

通过HBuilderX的发行菜单->网站 PC-Web或手机H5、勾选ssr、勾选将编译后的资源部署在uniCloud前端网页托管

这个过程,对开发者来说很简单,只需要点击按钮即可,实际上HBuilderX在背后做了大量工作,包括:

  1. 编译uni-app项目,分别生成Server BundleClient Bundle
  2. Client Bundle上传到uniCloud前端网页托管中
  3. Server Bundle作为uni-ssr云函数资源,编译并上传到uniCloud服务空间

步骤三:配置 uni-ssr 云函数的URL化路径

uni-ssr云函数绑定自定义域名,然后在浏览器中访问该域名,你就可以获得服务端渲染的页面了。

至此,uniCloud版SSR开发部署工作结束,是不是比原来简单多了?

总结

Vue.js 官网及社区很多文档,介绍SSR时都会提到,SSR是把双刃剑,优点缺点都很明显(2优3缺,缺大于优)。但经过HBuilderX & uniCloud加持的SSR,则完美解决了SSR的部分缺点,将其由缺转优,变成4优1缺,实现优大于缺。具体对比如下:

欢迎大家使用uniCloud版SSR

关联阅读:uni-app官网ssr介绍

继续阅读 »

SSR(服务端渲染)可以给SPA站点带来两大核心优势:

  • 更好的SEO
  • 更快的首屏渲染

很多uni-app开发者都在积极尝试SSR,但大多没入门就放弃了,原因在于SSR颇高的技术门槛。

vue.js 官网在介绍 SSR 章节时的描述如下:

本指南将会非常深入,并且假设你已经熟悉 Vue.js 本身,并且具有 Node.js 和 webpack 的相当不错的应用经验。

故很多uni-app开发者在社区中呼吁DCloud官方提供更为简洁、开箱即用的 uni-app SSR 方案。

uni-app团队近期在完成 vue 3.0 的全平台升级后,基于vue 3.0 + uniCloud,发布了开箱即用的 SSR 支持,我们称其为uniCloud版SSR

这是一个uniCloud版的SSR示例:news.dcloud.io是基于uni-app & uniCloud 开发的新闻系统。通过审查元素会发现,新闻列表数据包含在服务端下发的源码中,而不是客户端Ajax请求所得。

uniCloud版的SSR实现的较为简单,且和HBuilderX做了深度集成,你可以按照如下步骤快速上手:

步骤一:调整代码适配服务端运行环境

  1. 生命周期:uni-app的生命周期钩子函数中,页面onLoad、组件beforeCreatecreated 会在服务器端渲染 (SSR) 过程中被调用,你需要检查原项目代码中获取数据的时机;
  2. 特定平台API:若直接使用了如 windowdocument,这类仅浏览器支持的全局变量,则会在云端 Node.js 中执行时抛出错误;
  3. 数据预取:<uniCloud-db>组件天然支持SSR,无需调整代码,推荐使用<uniCloud-db>查询数据库。如果你未使用<uniCloud-db>组件,则可使用serverPrefetch来实现服务器端数据获取,使用@dcloudio/uni-app提供的ssrRef或Vue.js官方的Vuex来实现状态同步;

更多详细信息及示例代码,参考:https://uniapp.dcloud.net.cn/collocation/ssr

步骤二:编译发行

通过HBuilderX的发行菜单->网站 PC-Web或手机H5、勾选ssr、勾选将编译后的资源部署在uniCloud前端网页托管

这个过程,对开发者来说很简单,只需要点击按钮即可,实际上HBuilderX在背后做了大量工作,包括:

  1. 编译uni-app项目,分别生成Server BundleClient Bundle
  2. Client Bundle上传到uniCloud前端网页托管中
  3. Server Bundle作为uni-ssr云函数资源,编译并上传到uniCloud服务空间

步骤三:配置 uni-ssr 云函数的URL化路径

uni-ssr云函数绑定自定义域名,然后在浏览器中访问该域名,你就可以获得服务端渲染的页面了。

至此,uniCloud版SSR开发部署工作结束,是不是比原来简单多了?

总结

Vue.js 官网及社区很多文档,介绍SSR时都会提到,SSR是把双刃剑,优点缺点都很明显(2优3缺,缺大于优)。但经过HBuilderX & uniCloud加持的SSR,则完美解决了SSR的部分缺点,将其由缺转优,变成4优1缺,实现优大于缺。具体对比如下:

欢迎大家使用uniCloud版SSR

关联阅读:uni-app官网ssr介绍

收起阅读 »

云打包是真慢啊 官方能不能好好优化下体验啊

云打包

[HBuilder] 12:28:27.014 时间: 2021-09-29 11:59:09 类型: Android 公共测试证书 队列中

[HBuilder] 12:28:27.014 时间: 2021-09-29 11:59:09 类型: Android 公共测试证书 队列中

普通项目使用uniCloud

uniCloud

uinCloud admin项目实在是太丑,而且很多功能不全,而一般的项目不能直接用,毕竟有些后台还不是用vue,用云函数URL化太麻烦,而且不能用<unicloud-db> 组件,发挥不了uniCloud的优势。
这里我找到一个后门,可以让普通项目也用上uniCloud的功能,如直接在项目中直接用 uniCloud.callFunction()、uniCloud.database()、uniCloud.uploadFile()、直接引用<unicloud-db>,这样相当于是用到了uniCloud的优势,而对本身的项目又不需要做过多的修改就能直接兼容。
具体的方法就是建一个uni-app项目,在main.js文件中,只加上一句,window.uniCloud=uniCloud,然后打包,一般会生成三个JS文件,可以上传到CDN也可以直接放到项目里直接引用。
这里有几点要说一下,用VUE3打包,生成的是模块形式,代码较小,用VUE2打包生成文件会较大。还有就是一定要在项目开始前就引入文件。生面的文件可以适当的修改。
到此为止, uniCloud.callFunction()、uniCloud.database()、uniCloud.uploadFile()就可以直接在项目中使用。
<unicloud-db>则需要手动加一下。到uni-app的源码里面直接搜unicloud-db 找到对应的VUE文件,搜uni.强窗什么的全部删除或自己根据项目重写,可直接添加到全局也可以局部引用。对于VUE3项目注意一下销毁的生命周期。

继续阅读 »

uinCloud admin项目实在是太丑,而且很多功能不全,而一般的项目不能直接用,毕竟有些后台还不是用vue,用云函数URL化太麻烦,而且不能用<unicloud-db> 组件,发挥不了uniCloud的优势。
这里我找到一个后门,可以让普通项目也用上uniCloud的功能,如直接在项目中直接用 uniCloud.callFunction()、uniCloud.database()、uniCloud.uploadFile()、直接引用<unicloud-db>,这样相当于是用到了uniCloud的优势,而对本身的项目又不需要做过多的修改就能直接兼容。
具体的方法就是建一个uni-app项目,在main.js文件中,只加上一句,window.uniCloud=uniCloud,然后打包,一般会生成三个JS文件,可以上传到CDN也可以直接放到项目里直接引用。
这里有几点要说一下,用VUE3打包,生成的是模块形式,代码较小,用VUE2打包生成文件会较大。还有就是一定要在项目开始前就引入文件。生面的文件可以适当的修改。
到此为止, uniCloud.callFunction()、uniCloud.database()、uniCloud.uploadFile()就可以直接在项目中使用。
<unicloud-db>则需要手动加一下。到uni-app的源码里面直接搜unicloud-db 找到对应的VUE文件,搜uni.强窗什么的全部删除或自己根据项目重写,可直接添加到全局也可以局部引用。对于VUE3项目注意一下销毁的生命周期。

收起阅读 »

针对升级到HbuilderX-3.2.9中 Android 推送权限判断是否开启失效的解决

新版本 升级更新

该文章是针对 升级到3.2.9后该推送权限功能失效的问题
前提代码:可以查看是否有相应匹配的代码

var isOn = undefined;  
var main = plus.android.runtimeMainActivity();  
var pkName = main.getPackageName();  
var uid = main.getApplicationInfo().plusGetAttribute("uid");  
var NotificationManagerCompat = plus.android.importClass("androidx.core.app.NotificationManagerCompat");  
// var NotificationManagerCompat = plus.android.importClass("android.support.v4.app.NotificationManagerCompat");  
isOn = NotificationManagerCompat.from(main).areNotificationsEnabled();

3.2.9更新中有一条:【重要】Android平台 新增 Android Support Library 升级迁移到 AndroidX

所以将 "android.support.v4.app.NotificationManagerCompat" 替换为 "androidx.core.app.NotificationManagerCompat",就可以正常运行

继续阅读 »

该文章是针对 升级到3.2.9后该推送权限功能失效的问题
前提代码:可以查看是否有相应匹配的代码

var isOn = undefined;  
var main = plus.android.runtimeMainActivity();  
var pkName = main.getPackageName();  
var uid = main.getApplicationInfo().plusGetAttribute("uid");  
var NotificationManagerCompat = plus.android.importClass("androidx.core.app.NotificationManagerCompat");  
// var NotificationManagerCompat = plus.android.importClass("android.support.v4.app.NotificationManagerCompat");  
isOn = NotificationManagerCompat.from(main).areNotificationsEnabled();

3.2.9更新中有一条:【重要】Android平台 新增 Android Support Library 升级迁移到 AndroidX

所以将 "android.support.v4.app.NotificationManagerCompat" 替换为 "androidx.core.app.NotificationManagerCompat",就可以正常运行

收起阅读 »