一. 搭建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 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. 通过模板快速构建界面.

【快速开发App实战】BUI高仿网易新闻App系列一、搭建App开发环境和工作空间相关推荐

Android高仿网易新闻客户端之动态添加标签
承接上一篇文章:Android高仿网易新闻客户端之首页,今天来实现动态添加标签效果. 动态标签页是一个流式布局,实现了宽度自动换行高度自动分配的功能,代码如下: FlowLayout.java pac ...
[分享]高仿网易新闻WebApp模板+Dcloud打包源码下载
BUI-163网易新闻大小: 6.27M 该App基于BUI Webapp框架+Dcloud构建. 仅供学习交流使用. 整个app开发过程记录在这里bui神速订阅号. 快速开发App系列篇预览交 ...
Android高仿网易新闻客户端之首页
关于实现网易新闻客户端的界面,以前写过很多博客,请参考: Android实现网易新闻客户端效果 Android实现网易新闻客户端侧滑菜单(一) Android实现网易新闻客户端侧滑菜单(二) 今天用V ...
android 高仿网易新闻,Android高仿网易新闻客户端
关于实现网易新闻客户端的界面,以前写过很多博客,请参考: 今天用ViewPager + FragmentAdapter + ViewPagerIndicator来实现. ViewPagerIndica ...
Toolbar+DrawerLayout高仿网易新闻客户端
首先看效果图,网易新闻客户端的特点是双向侧滑,并且左上角的图标会随着菜单的侧滑会有动画效果. 我们采用Toolbar和DrawerLayout实现双向侧滑以及actionbar 在菜单文件里先定义菜单 ...
高仿网易新闻频道选择器
前言前段时间公司做一个新闻类的项目,需要支持频道编辑,缓存等功能,界面效果逻辑就按照最新版的网易新闻来,网上没找到类似的轮子,二话不说直接开撸,为了做到和网易效果一模一样还是遇到不少坑和细节,这在此 ...
高仿网易新闻栏目动画效果
tyktfj0910 的博客地址:http://blog.csdn.net/tyk0910 效果预览今天准备用RecyclerView来实现网易新闻Tabs的动态效果.先看效果图: 点击下面的Rec ...
android高仿网易新闻上下拉刷新,仿网易新闻最新版的下拉刷新
今天一天做了一个仿照网易的下拉刷新,先上效果图: 代码还有一点问题.我先说怎么用把: 1. 布局文件. xmlns:tools="http://schemas.android.com/t ...
视频教程-微信小程序项目实战：高仿iOS计算器-微信开发
微信小程序项目实战:高仿iOS计算器东北大学计算机专业硕士研究生,欧瑞科技创始人&CEO,曾任国内著名软件公司项目经理,畅销书作者,企业IT内训讲师,CSDN学院专家讲师,制作视频课程超过1 ...

【快速开发App实战】BUI高仿网易新闻App系列一、搭建App开发环境和工作空间