uni-app云端一体提升10倍开发效率；HBuilderX 3.1强化nvue css、新增uni_module；部分网络打不开DCloud网址请修改DNS

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app云端一体提升10倍开发效率；HBuilderX 3.1强化nvue css、新增uni_module；部分网络打不开DCloud网址请修改DNS

一、部分网络打不开DCloud网址请修改DNS

详见：https://ask.dcloud.net.cn/article/38877

二、HBuilderX 3大升级，云端一体提升10倍开发效率

你还在写服务器代码吗？ 前端写request联网，后台写接收请求去查库，再返给前端，然后前台再绑定到data上… 天天干这么枯燥的事情不烦吗？

来看看HBuilderX 3内置的<unicloud-db>组件（代码块触发键是udb），前所未有的高效和简洁，服务器代码ByeBye！

比如uniCloud的云数据库有个user的表，里面有字段id、name，查询id=1的用户数据，把名字显示在界面上，写法如下：

<template>  
  <view>  
    <unicloud-db v-slot:default="{data, loading, error, options}" collection="user" field="name" :getone="true" where="id=='1'">
      <view>  
          {{ data.name}}  
      </view>  
    </unicloud-db>  
  </view>  
</template>

确定就这点代码就够了？服务器代码呢？ 是的，就这点代码，服务器代码不用写了！

至于数据读写权限，是配在数据库的DB Schema里，在云端确保权限安全。 详见

HBuilderX 3支持DB Schema的本地编辑和前端连本地云函数调试，开发更快捷。

在项目下存放的表结构信息，可以被HBuilderX识别读取，在编写代码时可以直接提示表名：

hx提示表名

自然也可以对字段和JQL查询语法进行提示：

hx提示字段

更酷的是，页面中的data数据，也可以被提示出来了！

hx提示数据

这在以往的开发模式是不可想象的，ide怎么可能知道ajax取来的json是什么结构？ 在uni-app + uniCloud + HBuilderX 的三位一体模式下，开发体验得到了前所未有的提升。

当然，schema文件的编写和提示也非常方便：

hx提示schema

还可以在本地直接修改云函数和schema，免上传调试。详见前端项目连接本地云函数

uniCloud还有如下提升开发效率的神器：

  • opendb，降低数据库设计门槛，同时也是多个插件的协作标准 详情
  • jql 查询语法，大幅降低数据库操作难度 详情
  • uniCloud Admin，基于uni-app的pc版，uniCloud为开发者提供了一套可扩展的admin系统，自带用户角色权限管理，并且支持各种插件扩展 详情
  • uni-id，无需自行开发用户管理。用户注册、登录、修改密码、token管理、三方社交登录、App一键登陆、密码加密存储、角色、权限体系、分享裂变…全都不用做了，拿去就用 详情
  • uniPay，无需自行开发支付。App、微信小程序、支付宝小程序，从前端到后端，代码都写好，只需填写向微信、支付宝申请的key就能使用 详情
  • schema2code，配好数据库的schema，自动生成数据的列表、搜索、新建、编辑、删除等全套代码 详情

更有插件市场众多插件，众多轮子拿来即用， 详见

进入uni-app + uniCloud 的云端一体世界，你的开发效率将提升10倍以上。

2020年12月20日，腾讯云在京举行Techo Park开发者大会。DCloud CEO王安应邀做主题演讲：《云端一体，提升10倍开发效率》。进一步阐述了如何利用云端一体，提升10倍开发效率，视频链接： https://mp.weixin.qq.com/s/4RTsA1nhRi3PAZdBAcc4rA

2021年3月1日公众号文章： 2021了，让我们把开发效率提升10倍吧！

HBuilderX 3.1 发布，大量重要更新

  • **【重要】**新增 uni_modules。uni-app生态的重要模块化方案。 详情

  • **【重要】**App平台 强化 nvue css 支持组合选择器（相邻兄弟选择器、普通兄弟选择器、子选择器、后代选择器），支持css简写（如border、background）

  • **【重要】**小程序平台 新增 发行时支持混合分包模式，将 uni-app 项目发行为小程序分包，集成到已有的原生开发的小程序 详情

  • **【重要】**uni-ui 新增 所有组件适配 PC 端，适配宽屏、拖动、支持enter和esc按键响应 详情

  • **【重要】**新增 云端一体搜索模板。无需自行开发搜索 详情

  • **【重要】**新增 uni-captcha 基于uniCloud的图片验证码 详情

  • **【重要】**新增 网赚游戏合成猫项目模板 详情

  • **【重要】**hello uniCloud 新增 clientDB、schema2code示例 详情

  • **【重要】**客户端 新增 uniCloud.mixinDatacom 混入，方便快速开发datacom组件，无需自行处理云数据绑定 详情

  • **【重要】**uni-id 新增 在token内默认缓存角色权限，云端获取角色权限不再查库，提升clientDB性能 详情


Harmonyos Next教程
1 回复

在探讨如何利用uni-app云端一体提升开发效率，并结合HBuilderX 3.1的新特性来优化开发流程时，我们可以通过具体代码案例来展示这些工具和技术如何在实际项目中发挥作用。

uni-app云端一体提升开发效率

uni-app通过其云端一体的能力，大大简化了跨平台开发的复杂性。以下是一个简单的示例，展示如何使用uni-app快速构建一个跨平台应用：

// main.js
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

在pages/index/index.vue中，我们可以定义一个简单的页面：

<template>
  <view class="content">
    <text>Hello, uni-app!</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      
    }
  }
}
</script>

<style>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

通过uni-app的云端编译和预览功能，开发者可以实时看到代码变化的效果，极大地提升了开发效率。

HBuilderX 3.1强化nvue css、新增uni_module

HBuilderX 3.1版本对nvue的CSS支持进行了强化，允许开发者使用更丰富的样式特性。同时，新增的uni_module功能使得模块化开发变得更加容易。以下是一个简单的uni_module示例：

假设我们创建一个名为my-module的模块，其manifest.json配置如下：

{
  "name": "my-module",
  "version": "1.0.0",
  "description": "A simple uni-app module",
  "uni-app": {
    "scripts": {
      "main": "path/to/main.js"
    }
  }
}

在主项目中，我们可以这样引入并使用该模块：

// 在主项目的main.js中引入模块
import MyModule from 'uni_modules/my-module/main.js';

// 使用模块提供的功能
MyModule.someFunction();

解决部分网络打不开DCloud网址的问题

针对部分网络环境下无法访问DCloud网址的问题，修改DNS是一个有效的解决方案。以下是在Windows系统上修改DNS的步骤（以修改为8.8.8.8和8.8.4.4为例）：

  1. 打开“控制面板” > “网络和Internet” > “网络和共享中心”。
  2. 点击当前连接的网络，选择“属性”。
  3. 在“Internet协议版本4（TCP/IPv4）”上点击“属性”。
  4. 选择“使用下面的DNS服务器地址”，并输入8.8.8.8和8.8.4.4。
  5. 点击“确定”保存设置。

通过以上代码示例和解决方案，开发者可以充分利用uni-app和HBuilderX的新特性，提升开发效率，并解决网络访问问题。

回到顶部