一. 搭建 App 开发环境和工作空间

前言

咱们的指标是要做一个实在的案例, 着重通过 BUI 框架及其相干工具的应用, 联合原生打包平台, 帮忙大家了解一个 App 的开发过程. 以最新网易新闻的 App 为例, 尽量只形容过程, 细节能够自行欠缺, 高仿得太过以假乱真, 会有侵权问题 ^_^. 文章会分为多个小章节, 知识点一一解说的形式, 每天把握一点点, 提高一点点. 文章首发都会在 bui 神速 订阅号, 谢谢关注.

留神: 最终开发好的 App, 仅供​学习交换应用, 因为只获取到了网易新闻的局部接口, 局部内容仍然为测试数据. 扫二维码下载

BUI-163
大小: 6.26M

网易新闻

图片及工程曾经放到 github 上, 大家能够拿下来本人按本人的了解先做. BUI163 案例工程源码

1.1 装置软件和环境

整个开发环境会波及到以下内容.

1. vscode编辑器;
2. bui-fast疾速书写插件(不必记住控件的构造, 只须要输出控件的名字, 便会生成对应的初始化);
3. node 环境
4. buijs cli 工具 (构建工程模板工具);
5. Chrome 浏览器;

vscode 编辑器

?> 优良, 没什么好说的, 点击下载安装.

bui-fast

?> bui-fast 是编辑器插件, 针对 bui 控件的代码片段, VSCode 装置后点击进入装置 , 更多编辑器请自行查看 bui-fast 文档阐明

node 环境

?> 咱们举荐下载安装, 目前咱们应用的是 node12 版本.

查看 npm 版本号.

npm -v

装置 cnpm

装置实现当前, npm 的包在国外, 装置依赖会比较慢, 咱们举荐应用淘宝的 cnpm.

• Windows 用户

右键应用管理员关上终端, windows 记得敞开防火墙,360 等阻止零碎权限的货色.

npm install -g cnpm --registry=https://registry.npm.taobao.org

• Mac 用户

应用 sudo 命令须要输出用户明码.

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

buijs cli 工具

非必须, 然而很好用, 能够用来疾速构建最新的库跟模板. 装置完淘宝的 cnpm 当前, 执行以下命令. buijs-cli 文档

• Windows 用户

右键应用管理员关上终端

cnpm -g buijs

• Mac 用户

应用 sudo 命令须要输出用户明码.

sudo cnpm -g buijs

!> 后续的命令均以 mac 用户为准, 不再辨别不同零碎的装置了.

Chrome 装置

?> 用于 PC 上的成果预览及数据调试, 请自行下载安装.

1.2 构建工程

咱们的指标是要应用 dcloud 平台打包, 构建的工程带上对应的平台. 通过下载的单页工程 都是 webapp 工程, 比照以下就会发现 index.js,bui.js 外面的内容是不一样的, 具体哪里不一样, 咱们前面再阐明.

buijs create 163 -p dcloud

163 为自定义的工程名. buijs 应用阐明

创立胜利的工程预览图

目录的标准阐明, 请查看文档.

1.3 装置依赖

cd 163
cnpm install

一些红色的揭示能够疏忽, 外面有些依赖比拟老旧, 但并没有用到, 不会有影响.

1.4 运行预览

npm run dev

如果没有报错, 会主动生成一个端口, 并起一个服务, 主动关上 chrome 浏览器, 控制台还会有生成的二维码, 便于手机扫码近程调试. 本来的 163 目录下, 会多出一个 dist 的目录, 可能还会有 .temp 的目录, 这些都不必管, 咱们的编辑都针对 src 目录即可.

到这里环境的装置就根本 OK 了.

1.5 额定技巧 1. 本地文件调试

如果不通过 npm run dev, 间接关上163/src/index.html 是看不到成果的, 这是因为 chrome 的本地文件平安限度, 百度下如何 关上跨域的 chrome, 直到看到以下提醒, 代表曾经跨域了.

1.6 额定技巧 2. 打造 App 工作空间

有没有发现, 如果通过后面的形式来构建工程, 装置依赖, 每次新建一个 App 意味着要装置屡次, 网络慢不说, 占用的空间也是相当大, 好在 bui 的工程有对这种 node_modules 的复用做了思考.

首先, 创立一个工作空间的目录, 而后把外面的 src 目录删掉.

# 创立工作空间目录
buijs create workspace
# 进入工作空间目录
cd workspace
# 装置依赖
cnpm install
# 删除 src 目录
rm -rf src

这时, workspace 只剩下 app.json,package.json,gulefile.js 3 个文件.

在 workspace 目录下持续创立 163 的工程

# 创立 163 工程
buijs create 163 -p dcloud
# 预览 163 工程
npm run dev-163

1.7 成果预览

下一节, 2. 通过模板疾速构建界面.