2022年《微信小程序从基础到uni-app项目实战》

本文提供了一套完整的微信小程序从基础到uni-app项目实战的教程,包括uni-app简介、开发工具的选择与配置、项目创建、目录结构解析、运行到微信开发者工具的步骤,以及如何使用Git管理项目。教程还涵盖了tabBar的创建、首页的配置、网络请求的设定,展示了如何在uni-app中开发和管理微信小程序。
摘要由CSDN通过智能技术生成

教程推荐:黑马程序员前端微信小程序开发教程,微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)_

一、起步

1 uni-app 简介

uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码,可发布到 iOS、Android、

H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

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

2 、开发工具

uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处: 模板丰富 完善的智能提示 一键运行

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

2.1 下载 HBuilderX

1. 访问 HBuilderX 的官网首页 https://www.dcloud.io/hbuilderx.html

2. 点击首页的 DOWNLOAD 按钮

3. 选择下载 正式版 -> App 开发版

2.2 安装 HBuilderX

1. 将下载的 zip包 进行解压缩

2. 将解压之后的文件夹,存放到纯英文的目录中(且不能包含括号等特殊字符)

3. 双击 HBuilderX.exe 即可启动 HBuilderX

2.3 安装 scss/sass 编译

为了方便编写样式(例如: ),建议安装 scss/sass 编译 插 件。插件下载地址:

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

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

2.4 快捷键方案切换

操作步骤:工具 -> 预设快捷键方案切换 -> VS Code

 2.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 + 鼠标滚轮 缩放编辑器

3 新建 uni-app 项目

1. 文件 -> 新建 -> 项目

 2. 填写项目基本信息

 3. 项目创建成功

 4 目录结构

一个 uni-app 项目,默认包含如下目录及文件:

┌─components uni-app组件目录

│ └─comp-a.vue 可复用的a组件

├─pages 业务页面文件存放的目录

│ ├─index

│ │ └─index.vue index页面

│ └─list

│ └─list.vue list页面

├─static 存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此

├─main.js Vue初始化入口文件

├─App.vue 应用配置,用来配置小程序的全局样式、生命周期函数等

├─manifest.json 配置应用名称、appid、logo、版本等打包信息

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值