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

前言

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

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

BUI-163
大小: 6.26M

网易新闻

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

1.1 装置软件和环境

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

vscode编辑器;
bui-fast疾速书写插件(不必记住控件的构造,只须要输出控件的名字,便会生成对应的初始化);
node 环境
buijs cli工具 (构建工程模板工具);
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 163cnpm 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. 通过模板疾速构建界面.