使用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内置的常用样式变量)

主要文件介绍:

  • api 文件夹中存放的是各个页面的请求路径,引入request.service.js暴露出来的api,
  • colorui 使用了color-ui样式,个人认为样式非常好看,非常感谢,详情:color-ui
  • common 存放全局通用的js方法
  • components 存放全局组件,包括uni-ui以及自己封装的组件
  • pages 主要页面, 其中pages文件夹中 index文件中可布局底部的tab页面,通过v-if判断显示不同的tab页
  • services 通用的服务文件(我不知道这种描述是否准确,原来用的Angular4,Angular中服务概念对我有一定的影响)
    • auth.service.js 通过使用uni.setStorageSync简单封装了一些保存用户的token方法
    • config.service.js 保存全局的变量 例如:apiUrl请求接口的IP, storage_key 是token 的键值,全局引用的变量都可定义在这个文件内,后期如果需要改动,只需要修改这个文件中对用的值
    • request.service.js 使用Promise对uni.request进行封装,将get、post、delete请求方式暴露出来,在api文件夹中引用这个文件即可使用get、post、delete方法
  • static 静态文件,我主要用来放图片
  • unpackage (在小程序模拟器运行的文件)
  • App 应用配置,用来配置App全局样式以及监听

如何自定义底部tab导航栏

本人项目中需要根据不同的角色显示不同的底图tab页,那么原来在pages.json设置的tab页,不够灵活,也不好扩展,因此自定义tab页,具体如下

pages文件夹中,新建一个index文件夹并创建一个index.vue页面,在这个页面可布局底部tab, 根据点击不同的tab显示对应的tab页, 如图:

注意:

如果每个tab点击是切换不同的view,这个就相当于单页应用了,当页面比较复杂时,切换过程可能存在卡。所以使用自定义组件的tabbar就尽量避免太多复杂页面。

当然原生tabbar虽然体验好,但自定义性不足。这个需要开发者根据自己的需求来平衡选择。

如何使用colorui

引入

ColorUI是一个css库!!!在你引入样式后可以根据class来调用组件

下载源码解压获得/Colorui-UniApp文件夹,复制目录下的 /colorui 文件夹到你的项目根目录

App.vue引入关键Css main.css icon.css

<style>
@import "colorui/main.css";
@import "colorui/icon.css";
@import "app.css"; /* 你的项目css */
....
</style>

此时你可以使用colorUI提供的css样式了,

因为colorUI的文档说明正在完善中,具体样式对应的类名可能不清楚,那么你可将color-ui下载下来,使用HBuilderX运行在浏览器中,打开调试工具,找到对应的节点即可获取对应的类名,(当然你也可能会有其他好的方法)。

使用colorui自定义导航栏

pages.json 配置取消系统导航栏

"globalStyle": {
  "navigationStyle": "custom"
},

App.vue 获得系统信息

"globalStyle": {
  "navigationStyle": "custom"
},

main.js引入cu-custom组件

import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)

在需要的页面可以直接使用了,如下:

<cu-custom bgColor="bg-gradual-blue" :isBack="true">
  <block slot="backText">返回</block>
  <block slot="content">导航栏</block>
</cu-custom>

跨端兼容(如何你只是开发小程序,就不需要考虑)

根据平台特性,uni-app 提供了条件编译手段,在一个工程里优雅的完成了平台个性化实现。

<view class="content">
 <! -- #ifdef APP-PLUS -->
 <view>仅出现在 5+App 平台下的代码</view>
 <! -- #endif -->

 <! -- #ifndef H5 -->
 <view>除了 H5 平台,其它平台均存在的代码</view>
 <! -- #endif -->

  <! -- #ifdef H5 || MP-WEIXIN -->
 <view>仅在 H5 平台或微信小程序平台存在的代码</view>
 <! -- #endif -->
</view>

发布微信小程序

服务器域名必须是https合法域名

进入开发页面 开发 > 开发设置,设置服务器域名, 如图

发布小程序之前需要配置appid,应用名称、logo,可登录微信公众平台进入设置页,设置小程序的基本信息

使用HBuilderx找到发行 > 小程序-微信,点击后稍等片刻会启动微信开发工具,点击微信开发工具上传,填写上传信息即可,此时上传到微信公共平台是体验版,需要在版本管理>提交审核,等待后台审核,审核完成后,小程序也就上线成功了,如图:

总结

本文主要介绍了使用uni-app框架开发微信小程序,自己对默认模板的补充,包括封装request接口,引用color-ui,动态设置底部tab页,还有通过color-ui提供的导航栏组件,自定义导航栏。本人才疏学浅,表达能力有限,书写过程如有错误欢迎指正,也请点赞评论鼓励(ps: 内心怕怕的)

关于uni-app更多信息可参考官方文档 https://uniapp.dcloud.io

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • uni-app微信小程序登录并使用vuex存储登录状态的思路详解

    微信小程序注册登录思路 (这是根据自身的项目的思路,不一定每个项目都适用) 1.制作授权登录框,引导用户点击按钮 2.uni.login获取code 3.把code传给后端接口,后端返回如下数据 openid: "ogtVM5RWdfadfasdfadfadV5s" status: 1 // 状态码:status==0(该用户未注册,需调用注册接口) status==1(该用户已注册) 4.判断用户是否注册,并调用用户信息接口 (1)若已注册则提示登录成功,并调用后台给的获取用户信息的

  • 详解使用uni-app开发微信小程序之登录模块

    从微信小程序官方发布的公告中我们可获知:小程序体验版.开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败,需使用 <button open-type="getUserInfo"></button> 引导用户主动进行授权操作: 1.当用户未授权过,调用该接口将直接报错 2.当用户授权过,可以使用该接口获取用户信息 但在实际开发中我们可能需要弹出授权询问框,因此需要我们自己来写模拟授权弹框(主要是对<buttonopen-typ

  • 微信小程序自定义tabBar在uni-app的适配详解

    引言:此方法可用作大部分微信小程序支持,但uni-app文档中却找不到相关说明的API 需求 需要在微信小程序中,实现一个中间图标突出显示的异形导航栏. 如下图 实现方法设计 要做这种异形的导航栏,用直接在配置文件里面写list的方法肯定做不到.那么,就有以下两种可替代方法. 在每一个页面都加载一个tabBar组件,与页面同时渲染. 设置自定义tabBar,修改tabBar的样式. 优缺点分析:方法1实现起来略为简单,但是会出现代码可重用率低,降低性能,已经界面跳动等问题.方法2则是微信官方提供

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

    前言 9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目,以及自己对框架的补充,包括封装request接口,引用color-ui,动态设置底部tab页等,详情见下文 uni-app 介绍(官网) uni-app是一个使用Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.H5.以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台. 即使不

  • 如何使用uniapp开发微信小程序获取当前位置详解

    目录 前言 一.配置 1.进入mainfest.json文件配置permission块 2.进入微信公众平台添加合法域名 3.高德SDK文件下载 二.使用步骤 (直接封装组件) 1.在组件中引入amap-wx.130.js文件 2.在data中定义 3.在created中定义 4.在methods中定义 5.在你需要使用的vue页面调用改组件 总结 前言 使用uniapp开发微信小程序时,多多少少会遇到获取当前位置的详细信息(比如:xxx省xxx市),uniapp提供了一个名为uni.getLo

  • 使用TypeScript开发微信小程序的方法

    TypeScript简介: TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构师,已工作于TypeScript的开发. TypeScript扩展了JavaScript的语法,所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作.TypeScript是为大型应用之开发而设计,而编译时它产生 JavaScript 以确保兼容性.

  • 解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题

    前言 最近博主正在用微信小程序开发一款网上商城系统.恰好赶上了美团开源的小程序开发框架mpvue.该框架继承了vue.js的特性,用起来还是蛮爽的.然后在开发中,数据仓库这块懵逼了, 引入的vuex的辅助函数mapState.mapGetters.mapMutations.mapActions等怎么就不能用呢.苦恼之际打开D盘,一番愉悦之后,终于想通啦- 问题分析 •vuex辅助函数 首先简单说一下vuex的辅助函数mapState.mapGetters.mapMutations.mapActi

  • 使用taro开发微信小程序遇到的坑总结

    Taro,京东凹凸实验室出品的适配多端的一个框架,Taro 是一套遵循 React 语法规范的 多端开发 解决方案.现如今市面上端的形态多种多样,Web.React-Native.微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要. 一.taro开发搭建 1.taro很方便就在于其环境搭建很轻松,照着官方文档几行代码就能搭建好. 2.在进行预览的时候,不同的方式区别是很大的

  • Android开发微信小程序页面的图文教程

    初识Android Android是我们在日常生活中注视最久的,我们所使用的所有手机APP基本上都可以在Android上运行.而这次我们将开发一个app页面. Android Studio Android Studio 是谷歌推出的一个Android集成开发工具,基于IntelliJ IDEA. 类似 Eclipse ADT,Android Studio 提供了集成的 Android 开发工具用于开发和调试.大概就是一个开发工具. 项目介绍 我们会首先建立大概的框架,会将一个页面分为三个部分.下

  • Android开发微信小程序路由跳转方式

    目录 官方文档 路由跳转的两种形式 标签形式 js形式 快速总结 小程序路由跳转 1.1 wx.switchTab(Object object) 1.2 wx.reLaunch(Object object) 1.3 wx.redirectTo(Object object) 1.4 wx.navigateTo(Object object) 1.5 wx.redirectTo与wx.navigateTo的区别 1.6 wx.navigateBack(Object object) 官方文档 https

  • uni-app 开发微信小程序定位功能

    目录 一.注册账号 二.创建应用和Key 1.进入控制台 2.创建应用 3.创建Key 三.登录微信公众平台后台 四.下载微信小程序JavaScriptSDK 五.代码实现 六.一般获取经纬度地址 七.相对精确的获取经纬度地址 1.获取位置监听的权限 2.开启位置监听 3.监听实时地理位置变化 使用onLocationChange方法持续监听地址,根据定位精度字段判断是否使用此次定位的经纬度. 已经会定位的直接跳七.相对精确的获取经纬度地址 一.注册账号 把信息都输入就好了 腾讯位置服务 - 立

  • uniapp开发微信小程序自定义顶部导航栏功能实例

    目录 自定义导航栏渐变色,先上效果 重点来了,导航栏设置渐变色 补充:更换图标 总结 自定义导航栏渐变色,先上效果 使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色 全局定义导航栏 "window": { "navigationBarBackgroundColor": "#32A2FD", // 顶部背景颜色 "navigationBarTitleText

  • 详解Linux 下开发微信小程序安装开发工具

    详解Linux 下开发微信小程序安装开发工具 1. git clone https://github.com/yuan1994/wechat_web_devtools 然后创建一个文件夹 mkdir /opt/tencent/ 移动文件 mv ./wechat_web_devtools /opt/tencent 修改用户组 chown -R root:root /opt/tencent/wechat_web_devtools 启动测试工具 /opt/tencent/wechat_web_devt

随机推荐