uniapp开发微信小程序
uni-app介绍(官网)
uni-app
是一个使用Vue.js
开发所有前端应用的框架,开发者编写一套代码,可发布到iOS
、Android
、H5
、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。
即使不跨端,uni-app
同时也是更好的小程序开发框架。
开发工具(HBuilderX)
HBuilderX 官方下载网址:https://www.dcloud.io/hbuilderx.html
HBuilderX 提供了一些插件,可直接下载安装,具体如下图: 工具 > 插件安装
项目结构
首先我们通过 HBuilderx > 文件 > 项目,选择 uni-app项目,模板我选择的是默认模板,当然你也可以选择其他模板,接着确认创建,如果你选择的是默认模板,此时你的文件夹应该如下图:
接着我根据自己的项目需求,以及为了与vue
的pc
项目结构保持一下,分别添加如下文件夹:
主要文件介绍:
api
文件夹中存放的是各个页面的请求路径,引入request.service.js
暴露出来的api
,colorui
使用了color-ui
样式,个人认为样式非常好看,非常感谢!common
存放全局通用的js方法components
存放全局组件,包括uni-ui
以及自己封装的组件pages
主要页面, 其中pages
文件夹中index
文件中可布局底部的tab
页面,通过v-if
判断显示不同的tab页services
通用的服务文件(我不知道这种描述是否准确,原来用的Angular4
,Angular
中服务概念对我有一定的影响)static
静态文件,我主要用来放图片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
方法
unpackage
(在小程序模拟器运行的文件)App
应用配置,用来配置App全局样式以及监听
如何自定义底部tab导航栏
本人项目中需要根据不同的角色显示不同的地图tab页,那么原来在pages.json设置的tab页,不够灵活,也不好扩展,因此自定义tab页,具体如下:
1)在pages文件夹中,新建一个index文件夹并创建一个index.vue页面,在这个页面可布局底部tab,根据点击不同的tab显示对应的tab页,如图:
注意:
2)如果每个tab点击是切换不同的view,这个就相当于首页应用了,当页面比较复杂时,切换过程存在卡顿。所以使用自定义的tabbar就尽量避免太多复杂的页面。
3)当然原生tabbar虽然体验好,但自定义性不足,这个需要开发者根据字节的需求来平衡选择。
如何使用colorui
ColorUI是一个css库!在你引入样式后根据class来调用组件
1)下载源码解压获得/Colorui-UniApp文件夹,复制目录下的/colorui文件夹到你的项目根目录
2)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
获得系统信息
onLaunch: function() {
uni.getSystemInfo({
success: function(e) {
// #ifndef MP
Vue.prototype.StatusBar = e.statusBarHeight;
if (e.platform == 'android') {
Vue.prototype.CustomBar = e.statusBarHeight + 50;
} else {
Vue.prototype.CustomBar = e.statusBarHeight + 45;
};
// #endif
// #ifdef MP-WEIXIN (微信小程序)
Vue.prototype.StatusBar = e.statusBarHeight;
let custom = wx.getMenuButtonBoundingClientRect();
Vue.prototype.Custom = custom;
Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
// #endif
// #ifdef MP-ALIPAY
Vue.prototype.StatusBar = e.statusBarHeight;
Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
// #endif
}
})
},
- 在
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
uniapp开发微信小程序的更多相关文章
- 使用uni-app开发微信小程序
uni-app 开发微信小程序 前言 9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目, ...
- uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤
uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponen ...
- 使用uView UI+UniApp开发微信小程序
在前面随笔的介绍中,我们已经为各种框架,已经准备了Web API.Winform端.Bootstrap-Vue的公司动态网站前端.Vue&Element的管理前端等内容,基本都是基于Web A ...
- 使用uView UI+UniApp开发微信小程序--判断用户是否登录并跳转
在<使用uView UI+UniApp开发微信小程序>的随笔中,介绍了基于uView UI+UniApp开发微信小程序的一些基础知识和准备工作,其中也大概介绍了一下基本的登录过程,本篇随笔 ...
- 使用uView UI+UniApp开发微信小程序--微信授权绑定和一键登录系统
在前面随笔<使用uView UI+UniApp开发微信小程序>和<使用uView UI+UniApp开发微信小程序--判断用户是否登录并跳转>介绍了微信小程序的常规登录处理和验 ...
- 使用uni-app开发微信小程序之登录模块
从微信小程序官方发布的公告中我们可获知:小程序体验版.开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败,需使用 <button open-type=" ...
- uni-app开发微信小程序的几天时间
人只有在不断的学习,才能不断的给自己充电,如果我们停止了学习,就像人没有了血脉,就会死亡,近来学习比较忙,压力比较大,整天面对着电脑,敲击代码,从中虽然收获了快乐,但是换来的确实身体的伤痛,最近虽然自 ...
- uniapp开发微信小程序跳转出现navigateTo:fail page "pages/user/pages/user/address/address" is not found
在app.json文件中pages中: ,{ "path" : "pages/user/address/address", "style" ...
- 基于uni-app的微信小程序之分包
作者:故事我忘了¢个人微信公众号:程序猿的月光宝盒 目录 0. 缘由 1. 关于分包 1.0 这是 官方文档 1.1 注意事项 2.使用方法 2.1 首先你得有个uniapp的微信小程序项目 2.2 ...
- uniapp|微信小程序获取当前城市名称--逆地址解析
六年代码两茫茫,不思量,自难忘 6年资深前端主管一枚,只分享技术干货,项目实战经验 关注博主不迷路~ 问题 uniapp开发的小程序需要获取当前城市名称 解决步骤 看文档 当然是看uniapp文档,我 ...
随机推荐
- [题解] Codeforces 1548 C The Three Little Pigs 组合数学,生成函数
题目 首先令\(x=i\)时的答案为\(f_i\) ,令\(f_i\)对应的普通生成函数为\(F(x)\). 很容易发现\(F(x)=\sum_{i=0}^n (1+x)^{3i}\),sigma是在 ...
- P1706 全排列问题 方法记录
原题链接 全排列问题 题目描述 按照字典序输出自然数 \(1\) 到 \(n\) 所有不重复的排列,即 \(n\) 的全排列,要求所产生的任一数字序列中不允许出现重复的数字. 输入格式 一个整数 \( ...
- AT&T汇编语法与x86语法基本区别
AT&T汇编和8086汇编语言虽然两者很相似,但是还是不能根据8086的语法规则来读AT&T汇编的吧,所以还是要看看AT&T汇编的语法规则,因为在读内核代码时,跟硬件打交道的部 ...
- MSQL-->存储引擎
概述 MySQL体系结构图 Innodb引擎是在mysql的5.5版本之后的默认存储引擎. Index是在引擎层次的,不同的存储引擎index的用法不同. 存储引擎就是存储数据,建立索引,更新查询数据 ...
- 2022-09-11-Typecho_RSS优化显示全文
layout: post cid: 26 title: Typecho RSS优化显示全文 slug: 26 date: 2022/09/11 15:53:38 updated: 2022/09/11 ...
- 22.-CSRF攻击
一.CSRF-跨站伪造请求攻击 某些恶意网站上包含链接.表单按钮或者JavaScript,它们会利用登录过的用户在浏览器中的认证信息视图在你的网站上完成某些操作 这就是跨站请求伪造(CSRF,即Cro ...
- CSS 渐变锯齿消失术
在 CSS 中,渐变(Gradient)可谓是最为强大的一个属性之一. 但是,经常有同学在使用渐变的过程中会遇到渐变图形产生的锯齿问题. 何为渐变锯齿? 那么,什么是渐变图形产生的锯齿呢? 简单的一个 ...
- spring框架-jdbcTemplate
首先 dao层: dao -bookdao(interface) -bookdaoimpl service层: bookService 实体类对象 entiry-book 测试类 Test-TestB ...
- Docker基础和常用命令
Docker基础和常用命令 一,Docker 简介 1.1,什么是 Docker Docker 使用 Google 公司推出的 Go 语言 进行开发实现,基于 Linux 内核的 cgroup,nam ...
- python-代码编程规范
命名 常用简写 名称相关 # 信息 information: info # 功能 function : func # 数量 quantity:qty PYQT相关 button : btn_ chec ...