nui-app vue.js项目实战---微信小程序
基于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"
}
配置网络请求
由于平台的限制,小程序项目中不支持 axios,而且原生的 wx.request() API 功能较为简单,不支
持拦截器等全局定制的功能。因此,建议在 uni-app 项目中使用 @escook/request-miniprogram 第
三方包发起网络数据请求。
官方文档
如果无法使用nmp命令:请参考文章:添加链接描述
nui-app vue.js项目实战---微信小程序相关推荐
- uni-app(Vue.js)创建运行微信小程序
uni-app(Vue.js)创建运行微信小程序 1.全局安装 npm install -g @vue/cli 需要安装node,官方网站,否则提示npm不可用 2.创建uni-app 新建文件夹,选 ...
- vue.js项目实战运用篇之抖音视频APP-第十一节: 注册登录及验证码功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
- vue.js项目实战运用篇之抖音视频APP-第八节: 视频播放功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
- vue.js项目实战运用篇之抖音视频APP-第二节:项目基础架构搭建
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
- vue.js项目实战运用篇之抖音视频APP-第四节:顶部导航栏组件功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
- vue.js项目实战运用篇之抖音视频APP-第三节:底部导航栏组件功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
- vue.js项目实战运用篇之抖音视频APP-第十五节: 朋友页面功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
- vue.js项目实战运用篇之抖音视频APP-第一节:项目环境搭建
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
- vue.js项目实战运用篇之抖音视频APP-第十节: 评论列表功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
最新文章
- C++ 虚函数与存虚函数
- Lync 小技巧-42-动态-IP-统一沟通-环境-IP-变更后-操作
- matchers依赖_Hamcrest Matchers教程
- 前端学习(2514):实战
- C#ADO.NET操作数据代码汇总
- 《JavaScript高级程序设计》红宝书第二遍阅读(动手实践)
- git快速入门 push/clone/reset/merge/切换分支全都有
- 2014腾讯实习生笔试题——define与typedef
- 在cell中自定义分割线的小技巧
- Docker 为什么输给了Kubernetes?Docker 员工自述!
- linux下挂载ntfs分区错误解决方法
- 2016最新PHP燕十八系统实战入门网站视频教程
- 自动量程万用表的实现原理_万用表的工作原理是怎样的?看完终于懂了
- 微信插件制作之抢红包入门篇
- LabVIEW编程LabVIEW控制cRIO-9043例程与相关资料
- java 时间换算_时间换算java实现
- 京东广告受众基础属性预估
- 大白菜U盘重装Win10系统教程
- Win10安装Neo4j
- linux打开终端的快捷键放大,linux打开终端的快捷键是什么?
热门文章
- Android视频的放大和缩小
- JS 使用 lz-string存储 数据压缩
- 虾皮新手入门考试?shopee新手入门任务
- 不吹不黑,在外企的工作生活|年中总结
- 02、UVM工厂机制
- 【JavaSE】常用类3[String类、StringBuffer、StringBuilder]
- matlab运行一直正忙,MATLAB运行时一直处于忙的状态,是不是程序存在死循环
- python输入数字成数组_numpy使用digitize将数字转换为分类(文本)数组
- 从消费者角度评估RestFul的意义
- CommunicationsException: Communications link failure; 项目启动遇到数据库报错