uni-app获取位置经纬度并定位到当前位置
uni-app使用map组件定位到当前位置并进行标注
manifest.json添加如下内容:
需要定位的页面
<template>
<view>
<map
style="width: 100vw; height: 100vh;"
:latitude="latitude"
:longitude="longitude"
:scale="scale"
:markers="markers"
></map>
</view>
</template>
<scr ...
手牵手,使用uni-app从零开发一款视频小程序 (系列下 开发实战篇)
系列文章
手牵手,使用uni-app从零开发一款视频小程序 (系列上 准备工作篇)
手牵手,使用uni-app从零开发一款视频小程序 (系列下 开发实战篇)
扫码体验,先睹为快
可以扫描下微信小程序的二维码,体验一下开发完毕的效果:
代码地址:
GitHub : https://github.com/Tzlibai/uni-app-video -- Star 100+
uni-app插件市场 ...
手牵手,使用uni-app从零开发一款视频小程序 (系列上 准备工作篇)
系列文章
手牵手,使用uni-app从零开发一款视频小程序 (系列上 准备工作篇)
手牵手,使用uni-app从零开发一款视频小程序 (系列下 开发实战篇)
前言
好久不见,很久没更新博客了,前段时间在深圳出差,胡吃海喝颓废了很久,不想每天下班刷抖音、打游戏虚度光阴,准备把之前做的一个小程序案例详细的介绍一下,从安装编译器 ...
Uni-app---封装request.js
最近在用Uni-app做混合APP开发,对于众多的接口请求,为了方便管理,采用封装request来方便管理。简单代码示例:
在utils目录新建config.js文件,用于做配置
let host = "";
if(process.env.NODE_ENV === 'development'){
// 开发环境
host = "http://www.dianphp.com/";
}else{
// 生成环境
host = "http ...
uni-app版本更新(二)
APPUpdate.js
// #ifdef APP-PLUS
import $http from '@/config/requestConfig';
const platform = uni.getSystemInfoSync().platform;
// 主颜色
const $mainColor = "FF5B78";
// 弹窗图标url
const $iconUrl = "/static/ic_ar.png";
// 获取当前应用的版本号
export const getCurrentNo = function(callback) {
// ...
uni-app 接口封装
uni-app 的请求接口在官方文档里是这样的
uni.request({
url: 'https://www.example.com/request', //仅为示例,并非真实接口地址。
data: {
text: 'uni.request'
},
header: {
'custom-header': 'hello' //自定义请求头信息
},
success: (res) => {
console.log(res.dat ...
uni-app编译小程序v-show踩坑,以及uni-app.request请求
本文章向大家介绍uni-app在小程序中v-show指令失效,主要包括uni-app在小程序中v-show指令失效使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
因为公司需要,使用了uni-app一套代码开发微信公众号和微信小程序
遇到了一些bug
比如v-show,在公众号,h5网页当中都可以正 ...
Android uni-app封装原生插件
Android uni-app封装原生插件
uni-app是什么?
一个使用Vue.js开发所有前端应用框架,开发者编写一套代码,可发布到ios、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。
如果你还没有了解uni-app是什么:点击这里:这篇文章举例说明。。。
uni-app的特点
跨平台更 ...
Uni-app网络请求---uni.request
uni.request(OBJECT)
发起网络请求。
OBJECT 参数说明
参数名类型必填默认值说明平台差异说明
url
String
是
开发者服务器接口地址
data
Object/String/ArrayBuffer
否
请求的参数
App(自定义组件编译模式)不支持ArrayBuffer类型
header
Object
否
设置请求的 header,header 中不 ...
微信小程序项目转换为uni-app项目
一、它是谁?
【miniprogram-to-uniapp】转换微信小程序”项目为uni-app项目。原则上混淆过的项目,也可以进转换,因为关键字丢失,不一定会完美。
二、它的原理是什么?
最初是学了半节课堆和栈,觉得词法分析挺有意思的,再加入转换小程序插件时,发现这些繁琐的操作完全可以使用程序来完成。核心是使用Babel获取AST(词 ...
uni-app 实现APP的版本更新
在index.vue 中的onload方法里面或者app.vue中的onLaunch中添加如下部分:
update() {
var _this = this;
uni.request({
url: `${this.$store.state.apiBaseUrl}/users/versions`, //请求接口
method: 'POST',
success: result => {
if (result.data.code == 1) {
plus.runtime.getProperty(plus.runtime.appi ...
uni-app快速导入自己需要的插件
在uni-app中快速导入自己需要的插件
在uni-app的官网上;找到自己需要的插件;
然后点击右侧顶部的【使用HX导入】这一步的前提是你必须要用自己的账好登录;
然后选择你要导入哪一个项目 然后就可以了
插件
<template>
<!-- 获取一个数组,结构为[{date:'时间',info:'内容内容'}] -->
<!-- @click事件返回点击标签元素 ...
uni-app平台判断 | uni app判断h5 小程序 app 等不同平台
使用
// @/utils/Config.tsimport {EPlatform} from './EPlatform';
import {isH5, Platform} from '@/utils/Platform'
/**配置信息*/
export default class Config {
/**http请求根目录*/
static get httpBaseUrl(): string {
if (isH5) {
return '/'
} else {
return 'http://demo.cn/'
}
...
VSCode 配 uni-app
CLI工程
点击查看原文
全局安装vue-cli
1 npm install -g @vue/cli
通过cli创建uni-app项目
1 vue create -p dcloudio/uni-preset-vue uni-app
选择项目模板,可自由选择如下图:👇
使用vscode打开创建的项目
安装vue语法提示插件👇
cli工程自带uni-app&5+app语法提示
安装组件语法提示
1 npm i ...
uni-app实现文件上传功能
uni-app实现文件上传功能
目前找到的比较好用的一款第三方插件
文件上传插件地址 https://ext.dcloud.net.cn/plugin?id=1015
插件下载选择下载示例项目zip ,可以直接运行项目查看效果
目录结构如下
index.vue,是使用文件上传功能的当前页面
@up-success="onSuccess" 是文件上传成功以后回传的数据
<template>
<view>
...
uni-app 使用个推推送系统消息
原文可查看此处 ,搜索 uni-app 使用个推推送系统消息
https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg3NTAzMzAxNA==&scene=124#wechat_redirect
如果此链接在浏览器中无法打开,可将此链接发送给微信好友或者发送到微信文件传输助手。在点击打开
前置条件:
1.1 开发环境:windows
1.2 开发 ...
uni-app中仿微信列表长按弹出选择菜单
1、实现效果:
2、此链接引入uni-app插件:https://ext.dcloud.net.cn/plugin?id=678
3、view段:
<template>
<view>
<view class="list">
<view class="flex_col" @longpress="onLongPress" :class="{'active':pickerUserIndex==index}" @tap="listTap" v-for="(item,index) in userList"
...
uni-app如何解析html标签
一、导入rechText.js
参考网上资料uni-app如何完美解析富文本内容核心内容如下:
/*
graceUI rich-text 加强工具
link : graceui.hcoder.net
author : 5213606@qq.com 深海
*/
// 正则变量
var graceRichTextReg;
// 批量替换的样式 [ 根据项目需求自行设置 ]
var GRT = [
// div 样式
['div', "line-height:2em ...
uni-app 打包apk
B站:uniapp安卓离线打包教程2020年2.7.9版本超详细UNIAPP离线打包教程
工具: HBuilder X 2.7.9
Android Studio
最新Android-SDK 2.7.9
uniApp-demo%unpackage\resources\__UNI__C584307
打包完 ...
uni-app热更新
可前往此处公众号查看 https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg3NTAzMzAxNA==&scene=124#wechat_redirect
开发工具HbuilderX
开发框架 uni-app、h5+1、生成 App 资源升级包1.1、修改版本号1.2、首先,更新 manifest.json 中的版本号。比如之前是 1.0.0,那么新版本应该是 1.0.1 或 1.1.0 这样 ...