uni-app之uni.showToast()image路径问题
uni-app的API中，showToast的icon值只有success，loading，none三种显示，失败没有图标。如果失败时需要显示图标，就要用到自定义图标 image 了。
1 uni.showToast({
2 title: '扫码失败',
3 image:'/static/lost.png', //要写根路径，不要写相对路径
4 duration: 3000,
5 }) ...
uni-app设置页面背景及背景图片
设置背景
1、设置背景色：
<template>
<view class="container"> //最外层
<view class="bg-set"></view> //此标签为最外层view标签的第一个子标签
<view class="content"></view>
</view>
</template>
.bg-set{
position: fixed;
width: 100%;
height: 100%;
top: 0;
...
uni-app富文本渲染方案rich-text、uparse、v-html简单解析
uniapp语法：rich-text
1、rich-text是uni-app的内置组件，提供了高性能的富文本渲染模式。
2、API参考https://uniapp.dcloud.io/component/rich-text
3、rich-text的优势是全端支持、高性能。有个缺陷是只能整体设点击事件，无法对富文本中的图片、超链接单独设点击事件。（这个缺陷有点严重，因为这个缺陷，一般不建议使 ...
uni-app 创建typescript 项目 并且引入 vant
前言
在小程序上应用uniapp 然后引入ts ,你说香不香，哈哈哈
好了 先来一发教程：
官网下载 软件 https://uniapp.dcloud.io/
我创建的TS项目是，用cli 命令行创建的
全局安装vue-cli
npm install -g @vue/cli
创建uni-app
使用正式版（对应HBuilderX最新正式版）
vue create -p dcloudio/uni-preset-vue my-t ...
uni-app运行到浏览器跨域H5页面的跨域问题解决方案
官方文档对跨域的解决方案推荐：
https://ask.dcloud.net.cn/article/35267
更方便的解决方案
项目根目录直接创建一个vue.config.js文件，并在里面配置代理，直接上代码
module.exports = {
publicPath: './',
devServer: {
proxy: {
'/api': {
target: 'https://movie.douban.com', ...
uni-app 图片转base64
urlBase64(url) {
var toBase64Url;
uni.request({
url: url,
method: 'GET',
responseType: 'arraybuffer',
success: async res => {
let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64
toBase64Url = 'data:image/jpeg;base6 ...
uni-app 全局变量的几种实现方式
公用模块
定义一个专用的模块，用来组织和管理这些全局的变量，在需要的页面引入。注意这种方式只支持多个vue页面或多个nvue页面之间公用，vue和nvue之间不公用。
示例如下：在 uni-app 项目根目录下创建 common 目录，然后在 common 目录下新建 helper.js 用于定义公用的方法。
const websiteUrl = 'http://uniapp.dcloud ...
uni-app上使用leaflet地图的解决方案
在uni-app上自带有map组件，但是那个组件功能太弱，很多高级用法很难实现。用npm添加leaflet呢，又各种报错。
偶然和朋友聊起，可以用html来实现leaflet地图，然后用webview组件来加载这个html。webview其实就是一个浏览器内核。它可以渲染html，而且性能可以完全媲美原生。我们试验之后，果然发现非常棒，非常好用。哈哈
...
uni-app使用Vant组件
前言
vant ui有h5版和微信小程序版。其h5版只能用于h5，其微信小程序版（vant weapp）可用于微信和App，从uni-app 2.4.7起，H5和QQ小程序也支持了微信小程序组件。
使用步骤
下载代码
在项目根目录下新建 wxcomponents 目录 ，此目录应该与components 目录同级。
直接通过 git 下载 vant-weapp 最新源代码，并将dist目 ...
vue，uni-app 生命周期钩子函数
vue 生命周期函数：
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
uni-app 生命周期函数
应用生命周期
函数名说明
onLaunch
当uni-app 初始化完成时触发（全局只触发一次）
onShow
当 uni-app 启动，或从后台进入前台显示
onHide
当 un ...
vue h5转换uni-app指南（vue转uni、h5转uni）
如果你已经有了一个基于vue开发的H5站点，想转换为uni-app。
首先注意2个前提：
1、你的web站是适合手机屏幕的；
2、你的H5代码是全后端分离的，uni-app只处理前端代码。
一切从新建一个uni-app项目开始。然后依次进行
文件处理
把之前的vue web项目的前端代码copy到新项目下
如果之前的文件后缀名是.html，需要改为.vue， ...
uni-app高分开源电影项目源码案例分析，支持一套代码发布小程序、APP平台多个平台(前端入门必看)
uni-app-Video
GitHub地址：https://github.com/Tzlibai/uni-app-video
一个优秀的uni-app案例，旨在帮助大家更快的上手uni-app，共同进步！
Features
代码编写简洁，注释清晰，快速入门必备；
支持在线模糊搜索；
程序类目懒加载，支持在线播放预告片；
更好的App跨平台框架、更方便的H5开发框架，加载新页面速度 ...
uni-app拖拽悬浮球优化
使用uni-app拖拽悬浮球，插件不错 ，插件地址 ext.dcloud.net.cn/plugin?id=5…
插件挺不错的，有几点需求我改了下1、背景图片保持纵横比缩放图片，使用aspectFit好点2、初始化球位置时使用%比较符合实际，如果放到右底部使用px还要适配3、拖拽超出边框没有做限制。
<template>
<view class="holdon" ...
uni-app 之 web-view 与h5 通讯
已经很久没有更新我的博客了，差点要遗忘自己还有博客了，哈哈哈哈。
最近有接触过关于web-view的东西，大家也知道我一直在做uni-app的项目，也研究了很久，收获颇丰吧，今天就跟大家分享一下
什么是web-view
web-view是一个web浏览器组件，可以用来承担网页的容器，会自动铺满整个屏幕
各小程序平台，web-view ...
uni-app 实现navigateBack返回修改前一页面数据（H5、APP、小程序）
B页面返回修改A页面title的值
//A页面
<template>
<text class="title">返回修改的值：{{title}}</text>
</template>
export default {
data() {
return {
title: 'Hello'
}
},
}
//B页面
<button @click="change">修改上一页的title值</button>
方案一： getCurrentPages()
注 ...
uni-app 上传图片之压缩图片上传
原文：https://ask.dcloud.net.cn/article/36331?notification_id-701034__item_id-28962
应后台要求，上传得图片不得大于500kb，但我发现拍照或者相册里面的照片普遍大于1M，试用多种方法之后，终于在移动端测试成功，以下是全部代码
clickImg()页面点击事件，触发选择图片/拍照事件
uploadFile() 上传图片，使用async同步 ...
uni-app中，固定宽高，文字超出部分，隐藏并显示省略号。
.topic_cont_text{
padding: 30upx;
colof: #999;
background: #E1FFFF;
max-height: 130upx;
overflow: hidden;
word-break: break-all; /* break-all(允许在单词内换行。) */
text-overflow: ellipsis; /* 超出部分省略号 */
displa ...
vue-cli创建uni-app项目 （一）
官网地址
uni-app: https://uniapp.dcloud.io/quickstart?id=_2-%e9%80%9a%e8%bf%87vue-cli%e5%91%bd%e4%bb%a4%e8%a1%8c
uni-ui: https://ext.dcloud.net.cn/plugin?id=55
关于uniapp的ui库、ui框架、ui组件：https://blog.csdn.net/u010227042/article/details/103047908
vue-cli: https:/ ...
uni-app同步缓存值 设置 读取 删除
A页面
<view class="go-to-tab" @tap="gotologin">
去login页面
</view>
msg : [
'uniapp行业峰会频频亮相开发者反响热烈',
'DCloud完成B2轮融资，uni-app震撼发布',
'36氪热文榜推荐、CSDN公号推荐 DCloud'
]
gotologin(){
uni.setStorageSync('storage_key', 'hello');//存储一个字符传值
//存储数组前， ...
uni-app路由跳转
navigateTo
redirectTo
(1)保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面
（如果A->B来回频繁切换，不要A B两个方法都使用这个方法。）
//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});
页面跳转路径有层级限制，不能无限制跳转新页面
跳 ...
