大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

使用uni-app开发微信小程序的实现-创新互联

前言

创新互联公司是专业的扶风网站建设公司,扶风接单;提供成都网站设计、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行扶风网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

使用uni-app开发微信小程序的实现

9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目,以及自己对框架的补充,包括封装request接口,引用color-ui,动态设置底部tab页等,详情见下文

uni-app 介绍(官网)

uni-app是一个使用Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOSAndroidH5、以及各种小程序(微信/支付宝/百度/头条/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项目,模板我选择的是默认模板,当然你也可选择其他模板,接着确认创建,如果你选择的是默认模板,此时你的文件夹应该如下图:

接着我根据自己的项目需求,以及为了与vuepc项目结构保持一下,分别添加如下文件夹

具体代码可参考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://dzwzjz.com/article/cdpsis.html
在线咨询
服务热线
服务热线:028-86922220
TOP