【微信小程序】-- 配置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的开发环境的介绍,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹

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

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

相关文章
|
30天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
449 7
|
29天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
498 1
家政服务小程序APP开发,做好上门家政最快的方法是什么?
在家政服务领域,打造成功的平台并非易事。本文分享了三个关键步骤:避免初期盲目投入、采用低成本获客方式、建立有效的阿姨筛选机制。遵循这些方法,可助你避开常见陷阱,成为行业头部平台。
|
16天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
30天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
200 3
|
13天前
|
小程序 测试技术
上门家政维修系统软件开发,一套类似啄木鸟维修的小程序APP只要3000你敢信?
在数字化商业时代,一款名为“啄木鸟维修”的小程序 APP 以 3000 元的价格亮相,引发了广泛关注。这款 APP 功能全面,支持自营或入驻模式,提供完善的售后服务和详细的运营策略,开发周期仅需 3-5 天。它是否物超所值,还需用户自行判断,但其在市场中的表现确实引人注目。
|
29天前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
305 0
|
1月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
110 7
ly~
|
2月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
78 6
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
177 1