微信小程序实战教程-1：京西购物商城实战

文章目录

• 1、起步
• • 1.1 uni-app简介
  • 1.2 开发工具
  • • 1.2.1 下载HBuilderX
    • 1.2.2 安装HBuilderX
    • 1.2.3 安装scss/sass编译
    • 1.2.4 快捷键方案切换
  • 1.3 创建uni-app项目
  • 1.4 目录结构
  • 1.5 把项目运行到微信开发者工具
  • 1.6 使用Git管理项目
  • • 1.6.1 本地管理
    • 1.6.2 把项目托管到码云

1、起步

1.1 uni-app简介

网址：

/

• 1

uni-app 是一个使用 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

1.2 开发工具

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

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

1.2.1 下载HBuilderX

下载网址：

/

• 1

• 点击首页，Download
• 下载开发版即可

1.2.2 安装HBuilderX

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

1.2.3 安装scss/sass编译

为了方便编写样式，建议安装scss/sass插件，插件下载地址如下：

/plugin?id=2046

• 1

点击下载插件并导入HBuilderX中

点击【是】

1.2.4 快捷键方案切换

【工具】->【预设快捷键方案切换】->【VS Code】

1.3 创建uni-app项目

不同版本的HBuilderX可能方式略微不同，且生成的默认文件也不同，这里的HBuilderX版本是2.7.14。

1、【文件】->【新建】->【项目】

2、填写项目信息

3、创建成功

1.4 目录结构

• components：uni-app组件目录
  • ：可复用的a组件
• pages：业务页面文件存放的目录
  • index
    • ：index页面
  • list
    • ：list页面
• static：存放静态资源（图片、视频）等目录，注意，静态资源只能存放于此
• ：Vue初始化入口文件
• ：应用配置，用来配置小程序的全局样式，生命周期函数等
• ：配置应用名称、appid、logo、版本等打包信息
• ：配置页面路径、页面窗口样式、tabBar等页面类信息

1.5 把项目运行到微信开发者工具

1、填写自己的微信小程序的AppID：

2、在HBuilderX中配置【微信开发者工具】的安装路径

3、在微信开发者工具中，通过【设置】->【安全设置】面板，开启微信开发者工具的服务端口：

4、运行项目

1.6 使用Git管理项目

1.6.1 本地管理

1、在项目根目录中新建.gitignore忽略文件，并配置如下：

/node_modules
/unpackage/dist

• 1
• 2

注意，我们忽略了unpackage中的dist目录，因此默认情况下，unpackage目录不会被Git追踪（因为unpackage目录中不存在任何文件了），此时，我们为了Git能够正常追踪unpackage目录，按照惯例，我们可以在unpackage目录下创建一个叫做.gitkeep的文件进行占位。

2、打开终端，切换到根目录中，运行如下的命令，初始化本地Git仓库

git init

• 1

3、将所有文件都加入到暂存区

git add .

• 1

4、本地提交更新

git commit -m "init project"

• 1

1.6.2 把项目托管到码云

1. 注册并激活码云账号/
2. 生成并配置SSH公钥，运行ssh -t git@检测SSH公钥是否配置成功

   • 生成SSH公钥ssh-keygen -t ed25519 -C "Gitee SSH Key"

   • 

   • 详细配置链接/base/account/SSH%E5%85%AC%E9%92%A5%E8%AE%BE%E7%BD%AE

3. 创建空白的码云仓库
4. 把本地项目上传到码云仓库