使用使用uni-app开发微信小程序的实现开发微信小程序的实现
主要介绍了使用uni-app开发微信小程序的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具
有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前言前言
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内置的常用样式变量)
主要文件介绍：
api 文件夹中存放的是各个页面的请求路径，引入request.service.js暴露出来的api，
colorui 使用了color-ui样式，个人认为样式非常好看，非常感谢，详情：color-ui
common 存放全局通用的js方法
weixin_38584731
- 粉丝: 7
- 资源: 934
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
评论1