nui-app vue.js项目实战---微信小程序_用vue开发微信小程序(uni-app)

基于uni-app的小程序项目编写

什么是uni-app?

uni-app基于vue.js开发的前端应用框架，同一套代码可以在ios、安卓、h5,以及各种小程序使用。

开发工具

HBuilderX 下载开发版地址，主要是因为其模板丰富、操作简单。下载完压缩包以后，点击HBuilderx.exe即可安装.
scss/sass 编译安装路径：添加链接描述 安装方法如下：

创建新项目

组件说明

┌─components uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置小程序的全局样式、生命周期函数等
├─manifest.json 配置应用名称、appid、logo、版本等打包信息
└─pages.json 配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信

如何把项目运行到微信开发者工具上

1.填写微信小程序id

2.配置微信开发者路径

3.在微信开发者工具中设置服务端口：

4.在 HBuilderX 中，点击菜单栏中的 运行 -> 运行到小程序模拟器 -> 微信开发者工具 ，将当前 uni-app 项目编译之后，自动运行到微信开发者工具中，从而方便项目效果和调试：

创建页面

修改导航栏

全局页面下

"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "这里是名字",
"navigationBarBackgroundColor": "#C00000",
"backgroundColor": "#FFFFFF"
}
1
2
3
4
5
6

配置网络请求

由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支
持拦截器等全局定制的功能。因此，建议在 uni-app 项目中使用 @escook/request-miniprogram 第
三方包发起网络数据请求。
官方文档
如果无法使用nmp命令：请参考文章：添加链接描述