【微信小程序】-- 配置uni-app的开发环境(四十八)

简介: 【微信小程序】-- 配置uni-app的开发环境(四十八)



一、配置uni-app的开发环境

  前面已经学习了微信小程序一下基础知识。接下来就直接进入到项目开发实战了,首先来讲解一下配置uni-app的开发环境。话不多说,让我们原文再续,书接上回吧。

1、uni-app 简介

  uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码,可发布到 iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台,所以可以进行多端项目的开发。

  uni-app 在手,做啥都不愁。即使不跨端,uni-app 也是更好的小程序开发框架(详见)、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目,你都可以快速交付,不需要转换开发思维、不需要更改开发习惯。

详细的 uni-app 官方文档,请翻阅 https://uniapp.dcloud.net.cn/

2、开发工具

  uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处:

  • 模板丰富
  • 完善的智能提示
  • 一键运行

当然,你依然可以根据自己的喜好,选择使用 VS Code、Sublime、记事本… 等自己喜欢的编辑器!

下载 HBuilderX

  访问 HBuilderX 的官网首页 ,点击首页的 DOWNLOAD 按钮,选择下载 正式版。

安装 HBuilderX

  将下载的 zip包 进行解压缩,将解压之后的文件夹,存放到纯英文的目录中(且不能包含括号等特殊字符),双击 HBuilderX.exe 即可启动 HBuilderX。

  详细过程可参考 HBuilderX 安装教程

3、安装 scss/sass 编译

  在开发 uni-app 项目的时候,为了方便编写样式(例如:),建议安装 scss/sass 编译 插件,插件下载地址

https://ext.dcloud.net.cn/plugin?name=compile-node-sass

  进入插件下载页面之后,点击右上角的 使用 HBuilderX 导入插件 按钮进行自动安装,截图如下:

  当没有登录的时候点击下载就会跳出登录提示,没有账号的话可以注册一个。

  登录完之后就再点击下载按钮,就弹出提示询问是否安装 HBuilderX2.7以上的版本,这里是安装最新的 HBuilderX,所以点击 继续

  这里选择打开 HBuilder X

  自动打开 HBuilder X 后,点击 即可。

  然后 scss 插件包就会自动下载安装了。

  过一会就安装成功了,这样就能使用 sass 语法来编写代码了。

4、快捷键方案切换

  当想用别的快捷键方案的时候,操作步骤:工具 -> 预设快捷键方案切换 -> VS Code

  当然也可以选择别主题,操作步骤:工具 -> 主题 -> 雅蓝

5、修改编辑器的基本设置

  有时候字体太小了,行间距太小了什么的,也可以进行修改,操作步骤:工具 -> 设置 -> 打开 Settings.json 按需进行配置

  源码视图下比较常用的参考配置如下:

{
  "editor.colorScheme": "Default",
  "editor.fontSize": 12,
  "editor.fontFamily": "Consolas",
  "editor.fontFmyCHS": "微软雅黑 Light",
  "editor.insertSpaces": true,
  "editor.lineHeight": "1.5",
  "editor.minimap.enabled": false,
  "editor.mouseWheelZoom": true,
  "editor.onlyHighlightWord": false,
  "editor.tabSize": 2,
  "editor.wordWrap": true,
  "explorer.iconTheme": "vs-seti",
  "editor.codeassist.px2rem.enabel": false,
  "editor.codeassist.px2upx.enabel": false
}

Tips:可以使用 Ctrl + 鼠标滚轮 缩放编辑器

  将源码视图的代码复制过去即可,保存之后左侧样式就会发生变化。


总结

  感谢观看,这里就是uni-app的开发环境的介绍,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹

  也欢迎你,关注我。👍 👍 👍

  原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。

相关文章
|
12天前
|
移动开发 小程序
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
|
12天前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据是什么?
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据是什么?
17 0
|
12天前
|
小程序 Android开发 iOS开发
uni-app 安装与配置
uni-app 安装与配置
17 1
|
8天前
|
Web App开发 JSON 小程序
苹果app开发apple-app-site-association文件配置
apple-app-site-association 是苹果的配置文件,用于建立app和网站关联,支持Universal Links,使点击网站链接能直接打开相应app内部页面。配置文件为JSON格式,需上传至服务器`.well-known`目录或根目录。通过检查三个链接来测试配置,确保Content-Type为`application/json`。成功配置后,点击链接能在iPhone备忘录或Safari中直接唤起app,但可能有24-48小时延迟。
32 6
|
10天前
|
移动开发 监控 供应链
JAVA智慧工厂制造生产管理MES系统,全套源码,多端展示(app、小程序、H5、台后管理端)
一开始接触MES系统,很多人会和博主一样,对MES细节的应用不了解,这样很正常,因为MES系统相对于其他系统来讲应用比较多!
26 1
JAVA智慧工厂制造生产管理MES系统,全套源码,多端展示(app、小程序、H5、台后管理端)
|
12天前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
19 1
|
12天前
|
小程序 开发者
【微信小程序】微信开发者工具 app.json: [“subpackages“][0][“root“] 字段需为目录 已解决
【微信小程序】微信开发者工具 app.json: [“subpackages“][0][“root“] 字段需为目录 已解决
18 0
|
12天前
|
移动开发 小程序 前端开发
使用uni-app开发(h5、小程序、app)步骤
使用uni-app开发(h5、小程序、app)步骤
|
12天前
|
小程序 Windows
【微信小程序】全局配置和windows节点常用配置
【微信小程序】全局配置和windows节点常用配置
27 1
|
12天前
|
小程序
微信小程序——属性配置大全
微信小程序——属性配置大全
21 0

热门文章

最新文章