更新记录

1.0.5（2022-10-01）

2022100120.23

1.0.4（2022-10-01）

最新优化

1.0.3（2022-09-20）

更新了说明文档

平台兼容性

云函数类插件通用教程

使用云函数类插件的前提是：使用HBuilderX 2.9+

zach-ui

• 集成了很多比较好用的UI,自己封装了一些组件在里面

  插件市场地址： 点击前往

用前说明：

• 这玩意儿都是用的比较新的东西,hbx一直使用的alpha版本最高版跟随官方目前hbx3.6.3开发,不做老版本兼容
• 如果你是老项目或者不是在如下环境里面开发的,我劝你自己研究吧~我也没搞过~
• uniCloud默认用阿里云,只兼容VUE3,只准备兼容H5,微信H5,和部分小程序,作者开发调试都是在chrome里,偶尔微信小程序调试下,要开发其他的那就要自己调试了~
• 作者的其他项目插件如下:
• zach-center 主要用于用户中心,每个项目都重新开发显然麻烦,就用官方的uni-id-pages自己改了一套 >插件市场地址： 点击前往
• zach-site 多站点模块，如果您的项目需要用到多个站点的结构，最多支持三级结构，或许可以用到>插件市场地址： 点击前往

一.使用说明

• 1.整合vk-uview-ui和uni-ui,并使用了colorUI的样式,用了部分thorUI的组件库。
• 2.集成了项目自动微信登录,组件调用微信支付,哪里需要直接就能在哪里使用。
• 3.作者QQ1873539239,有疑问也可以加Q私聊,后续将完善各类插件到上面去,主要是方便自己用

二.注意事项

• 1.环境为HbduilderX3.6.0以上版本且使用VUE3开发
• 2.zach系列插件如果存在zachInit目录,则需要在App.vue中引入，并在onLaunch页面生命周期中执行,参照下方示例
• 3.zach系列插件如果有zachStore目录或zachInit目录，用于开发发布时,不建议打包成分包模式,分包模式下无法初始化访问到文件,怎么解决?自己扒开代码想办法!!!其实只需要将目录移植到主项目中执行就行了...

三.快速上手

• 1.zach-ui插件依赖的插件uni-config-center,uni-ui,uni-captcha,uni-pay,vk-uview-ui,uni-scss必需保证正确安装,否则部分功能可能无法正确使用!
• 2.项目必须使用vuex,且保证vuex开启多模块模式。在主项目中将插件根目录下zachStore文件夹以$zachui的命名注册成vuex模块。
• 3.参照下方示例,正确配置main.js和App.vue

main.js示例

import App from './App'
import store from '/store' 
import uView from './uni_modules/vk-uview-ui';
import { createSSRApp } from 'vue'

export function createApp() {
  const app = createSSRApp(App)

  app.use(store)//使用vuex,要在vue3版本模式使用哈~vue2版本会出现什么问题我也不清楚
  app.use(uView)//使用vk-uview-ui,这个是vk在uview-ui的1.8.3上改良版兼容vue3,使用时同样参照uview-ui的1.x的文档就行
  return {
    app
  }
}

App.vue示例

<script>
    //import zachUiInit from "@/uni_modules/zach-ui/zachInit"
    export default {
        onLaunch: async function(e) {
            // zach-ui插件初始化,zach-ui最新版本已经去除zachInit文件夹,建议在需要用到的地方直接使用zach-ui的VUEXaction功能
            //await zachUiInit.call(this, e)
            console.log("app onLaunch");

        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>

<style lang="scss">
    /*每个页面公共css,使用zach-ui一个样式就够了,避免重复引用，您可以扒开看看里面引入过些啥东东 */
    @import "@/uni_modules/zach-ui/index.scss";
</style>

zachStore注册到主项目示例

// store/index.js
import $zachui from "/uni_modules/zach-ui/zachStore"
import {
    createStore
} from 'vuex'
const store = createStore({
    /* 全局部分 */
    state:{},
    actions:{},
    mutations:{},
    getters:{},

    /* 模块化 */
    modules:{
        // 注意这个名字不能随便改,只能叫：$zhachui，不然就会出现一堆问题
        $zachui
    },
    strict: process.env.NODE_ENV !== 'production'
})
export default store

组件使用示例,

• 以zach-pay组件为例,其他组件自行测试
• 在页面中使用如下：

  
  <template>
  <view>
      <zach-pay :totalFee="totalFee" ref="zachPay"></zach-pay>
      <button type="default" @click="toPay">去支付{{totalFee}}分钱</button>
  </view>
  </template>