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


Posted in Javascript onDecember 13, 2019

前言

使用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框架主要用来开发微信小程序,我使用过程中感觉的好处是:

  • 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提供了一些插件,可直接下载安装,具体如下图: 工具 > 插件安装

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

项目结构

首先我们通过HBuilderx > 文件 > 项目,选择uni-app项目,模板我选择的是默认模板,当然你也可选择其他模板,接着确认创建,如果你选择的是默认模板,此时你的文件夹应该如下图:

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

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

具体代码可参考GitHub:weixin-start

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

+-- 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页, 如图:

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

注意:

如果每个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合法域名

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

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

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

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

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

总结

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

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

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

Javascript 相关文章推荐
use jscript with List Proxy Server Information
Jun 11 Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
node.js中的console用法总结
Dec 15 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
js 模仿锚点定位的实现方法
Nov 19 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
fullpage.js最后一屏滚动方式
Feb 06 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
Mar 02 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 #Javascript
微信小程序关键字变色实现代码实例
Dec 13 #Javascript
Servlet返回的数据js解析2种方法
Dec 12 #Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 #Javascript
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 #Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 #Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 #Javascript
You might like
PHP中的日期处理方法集锦
2007/01/02 PHP
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
基于jquery的模态div层弹出效果
2010/08/21 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
Python 正则表达式操作指南
2009/05/04 Python
Django中几种重定向方法
2015/04/28 Python
python实现的希尔排序算法实例
2015/07/01 Python
Python实现telnet服务器的方法
2015/07/10 Python
python解析基于xml格式的日志文件
2017/02/25 Python
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
python next()和iter()函数原理解析
2020/02/07 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
缅甸网上购物:Shop.com.mm
2017/12/05 全球购物
怎么样写好简历中的自我评价
2013/10/25 职场文书
参观接待方案
2014/03/17 职场文书
春节请假条
2014/04/11 职场文书
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python
python模板入门教程之flask Jinja
2022/04/11 Python