使用uni-app开发微信小程序的实现-创新互联
前言
创新互联公司是专业的扶风网站建设公司,扶风接单;提供成都网站设计、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行扶风网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!9月份,开始开发微信小程序,也曾调研过wepy
/mpvue
,考虑到后期跨端的需求,最终选择使用了uni-app
,本文主要介绍如何使用uni-app
搭建小程序项目,以及自己对框架的补充,包括封装request
接口,引用color-ui
,动态设置底部tab
页等,详情见下文
uni-app 介绍(官网)
uni-app
是一个使用Vue.js
开发所有前端应用的框架,开发者编写一套代码,可发布到iOS
、Android
、H5
、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。
即使不跨端,uni-app
同时也是更好的小程序开发框架。详见评测
好处如图:
我使用uni-app
框架主要用来开发微信小程序,我使用过程中感觉的好处是:
- uni-app框架使用的开发工具 HBuilderX,HBuilderX 内置相关环境,开箱即用,无需配置nodejs, 需要什么插件可直接下载,测试、打包、发布特别方便。
- uni-app采用Vue.js语法,基本支持vue大部分语法(vue的动态组件component不支持)。
- PC端使用vue封装的一些js方法,以及建构思想,可直接移植到uni-app中,比如:本人pc项目中api接口js文件,可直接复制到小程序框架api文件夹中(PS:api文件夹维护后端请求路径)
- uni-app 周边生态丰富,插件市场可用的组件特别多,也可使用vue语法自己封装一些组件。
开发工具(HBuilderX)
HBuilderX
: 官网IDE下载地址;HBuilderX
是通用的前端开发工具,但为uni-app
做了特别强化。HBuilderX
提供了一些插件,可直接下载安装,具体如下图:工具
>插件安装
项目结构
首先我们通过HBuilderx
> 文件
> 项目
,选择uni-app
项目,模板我选择的是默认模板,当然你也可选择其他模板,接着确认创建,如果你选择的是默认模板,此时你的文件夹应该如下图:
接着我根据自己的项目需求,以及为了与vue
的pc
项目结构保持一下,分别添加如下文件夹
具体代码可参考GitHub:weixin-start
+-- api -- (页面接口路径) | +-- login.js | +-- tools.js +-- colorui -- (color-ui 样式) +-- common -- (通用的js方法) +-- components -- (通用的组件) +-- pages -- (主要页面) +-- services -- (通用的服务) | +-- auth.service.js -- (主要封装了一些保存用户的token方法) | +-- config.service.js -- (存放全局通用的变量) | +-- request.service.js -- (封装了uni.request的方法) +-- static -- (静态文件) +-- unpackage -- (在小程序模拟器运行的文件) +-- App.vue -- (应用配置,用来配置App全局样式以及监听 ) +-- main.js -- ( Vue初始化入口文件) +-- manifest.json -- (配置应用名称、appid、logo、版本等打包信息) +-- pages.json -- (配置页面路由、导航条、选项卡等页面类信息) +-- uni.scss -- (这里是uni-app内置的常用样式变量)
文章名称:使用uni-app开发微信小程序的实现-创新互联
转载注明:http://myzitong.com/article/cdpsis.html