uni-app的开发环境_uniapp安装依赖

uni-app的开发环境

1.官网

uniapp.dcloud.net.cn

2.下载HbuildX依赖环境

3.安装scss/sass编译插件

scss/sass编译 - DCloud 插件市场

打开HbuildX软件，下载sass。

4.快捷方式转换

这样可以切换快捷键方式：

setting.json进行设置字体大小：

5.新建uni-app项目

5.1 把uni-app运行到微信开发者工具

第一步：配置AppId

第二步：在HbuildX中，配置-微信开发者工具的安装路径

在开发者工具中，进行配置

第三步：复制粘贴路径

复制

粘贴

第三步：打开微信开发者工具端口

第四步：双协调

在HbuildX中运行，运行到小程序模拟器

6.取消微信小程序中的HbuildX的checkmap选项

7.如何使用git管理项目

第一步：在根目录上新建一个.gitignore文件

第二步：忽略.gitgnore下两个文件

/node_modules(所有第三方的包没有必要保存)

/unpackage/dist

在这下面的两个文件，一个是包不需要保存，另一个是经过微信小程序编译生成的，要忽略。

一般为了起到一个占位的作用,我们要添加一个.gitkeep文件，前文对文件进行忽略了

第三步：在外部管理资源中打开

在外部打开cmd

// 初始化仓库

git init

// 查看状态

git status

// 添加到暂存区

git add .

// 添加到仓库

git commit -m 'init project'

7.1如何托管到码云上

登录码云账号，生成公钥

.ssh的位置在：

C:\Users\Administrator

复制成功之后，在码云中进行粘贴：

7.2 出现一个bug,在查看ssh是否配置成功的时候.

查看公钥是否配置成功：

ssh -t git@gitee.com

WARNING: UNPROTECTED PRIVATE KEY FILE!

可能是这个解决方式：

在根目下使用git bash文件打开，输入，就可以了。

chmod 700 C:\Users\Administrator/.ssh/id_rsa

7.3 在gitee中创建仓库，然后提交

输入这两行代码：

git remote add origin git@gitee.com:lkc20000416/uni-shop2.git

git push -u origin "master"

以上就是uni-app的提交流程。

8.创建tabBar分支

分支的创建在外部cmd创建外部管理

运行如下的命令，基于 master 分支在本地创建 tabBar 子分支，用来开发和 tabBar 相关的功能：

git checkout -b tabbar
git branch 

8.1 创建新的页面

创建四个页面：

8.2 配置tabBar效果

首先找到static静态资源图片，复制到uni-shop文件中：

8.3 在pages.json配置tabBar属性节点

@selectedColor可以改变tabBar下的文本颜色

"tabBar":{
    "selectedColor":"#C00000",
    "list":[
    {
        "pagePath":"pages/cart/cart",
        "text":"购物车",
        "iconPath":"static/tab_icons/cart.png",
        "selectedIconPath":"static/tab_icons/cart-active.png"
        
    },
    {
        "pagePath":"pages/home/home",
        "text":"首页",
        "iconPath":"static/tab_icons/home.png",
        "selectedIconPath":"static/tab_icons/home-active.png"   
    },
    {
        "pagePath":"pages/cate/cate",
        "text":"分类",
        "iconPath":"static/tab_icons/cate.png",
        "selectedIconPath":"static/tab_icons/cate-active.png"
    },
    {
        "pagePath":"pages/my/my",
        "text":"我的",