前置准备工作
- 默认头条小程序的APPID已申请成功
- 安装开发工具
或者其他自己喜欢的IDE都可以
项目开发
新建项目
可以通过HBuilderX可视化界面 以及 vue-cli命令行方式进行创建
下面主要介绍下通过vue-cli命令行这中方式来新建项目
- 全局安装vue-cli
npm install -g @vue/cli
- 创建
vue create -p dcloudio/uni-preset-vue user-uni-order
安装成功后提示选择模板，我们选择默认模板就可以了
项目整体流程
用户下单最短流首页下单-> 订单状态-> 完成支付, 如下：
综上我们需要做的页面维度： 首页，地址检索，城市选择，登录，个人中心，订单列表，webview（收费标准 , 预估价格, 订单状态， 订单详情，法律条款）
制定目录结构
┌─components //uni-app组件目录 │ └─comp-a.vue //可复用的a组件 ├─common // 通用的js&css工具等 ├─hybrid //存放本地网页的目录 ├─platforms //存放各平台专用页面的目录 ├─pages //业务页面文件存放的目录 │ ├─index │ │ └─components // 页级别组件 │ │ └─vuex // index页面vuex主要存放index的逻辑 │ │ └─index.vue // index页面 ├─static //存放应用引用静态资源（如图片、视频等） │ ├─mp-weixin //条件编译png │ │ └─a.png │ │ └─b.png ├─store // 状态统一管理，将各个页面的vuex汇总 ├─service // 汇总请求，api等 │ └─api.js // 接口api相关 │ └─config.js // 环境配置 │ └─index.js │ └─request.js // 网络请求 ├─ttcomponents // 头条小程序自定义组件存放目录 ├─main.js //Vue初始化入口文件 ├─App.vue //应用配置，用来配置App全局样式以及监听 ├─manifest.json //配置应用名称、appid、logo、版本等打包信息 └─pages.json //配置页面路由、导航条、选项卡等页面类信息
运行项目
想运行到哪个平台小程序，首先需要把相应的APPID, IDE路径对应填写正确
npm run dev:mp-toutiao // 实时监听编译
运行成功如下提示：
此时打开字节跳动IDE进行导入操作，就可以看见页面啦~~~
Tips：使用字节跳动编译器打开uni-app编译的小程序时，必须进行导入操作，而不是新建，因为新建会默认成代码片段，虽然也可以实时预览效果但是会导致上传功能确实
具体页面的开发
首页开发
- 页面效果
- 首页目录结构
项目中其他页面的目录结构与首页均相同，后面不做多余赘述。
├─pages │ ├─index │ │ └─components │ │ └─vuex │ │ │ └─index.js // 首页逻辑 │ │ └─index.vue
