基于uni-app开发微信小程序__手牵手带你开发【懂你找图】项目
前戏
某一天的夜里，敲完了代码之后便直接倒在床上睡着了，醒来时只记得梦里的一句话：“想要成为高手，就必须要大量实践，大量做项目，必须要把自己不会的东西全部吃透，不要得过且过。”，猛然想起是一位大神前辈对我说的，工作之后每天加班，回家之后就不想学习了，总想着一把锤子搞定所有钉子，这样是不行的，于是我就 ...
微信小程序转化为uni-app项目
前言：
之前自己做一个uni-app的项目的时候前端需要实现一个比较复杂的动态tab和swiper切换的功能，但是由于自己前端抠脚的原因没有写出来，然后自己在网上搜索的时候发现了有个微信小程序里面的页面及极其的符合我的需求。那么问题来了我该如何将微信小程序转为为uni-app项目呢？搜索了下网上的相关解决方案还真有个将 ...
uni-app 实战接入热门小说API接口 适用于新手
需要一点点的Uni-app的经验，如果大家是刚刚上手可以在站内收索 ：uni-app微信项目练习.先巩固一下基础知识，那么本文针对uni.request(OBJECT) 接入API进行简单的介绍，样式枫瑞就不做演示，能显示内容就行哈哈。
API：
小说接口：https://www.apiopen.top/novelApi详情接口：https://www.apiopen.top/novelInfo ...
uni-app路由的封装
uni-app路由的封装
更新内容
配置路由
此前版本需要手动配置路由，版本更新后将自动生成路由配置
添加全局钩子
此前不加全局钩子是为了性能
更新后会添加对应的钩子
（=&?）等特殊字符，将不会支持路由传参，各位可自行处理
encodeURIComponent
decodeURIComponent
新版Router使用方式
在页面添加&nb ...
Uni-app 学习笔记
转载自 https://www.jianshu.com/p/132a3de98238
uni-app跨平台框架官方教程
链接：https://ke.qq.com/course/343370
一、框架简介基础知识点
uniapp生命周期
onLaunch 当uniapp初始化完成时进行触发，全局只触发一次
onShow 当uniapp启动或者从后台进入前台显示
onHide 当uniapp从前台进入后台
onUniNViewMessage 对nv ...
uni-app实现商米硬件打印
本文档用到的设备型号：商米（sunmi）V2，2G+16G。
需要引用商米打印插件（每个APP项目需要花费1元购买该插件），插件地址：ext.dcloud.net.cn/plugin?id=8…。
文档上基本打印指令的参考案例，针对于打印图片该文档并没有提供方法直接使用，要通过ESC指令内容来执行打印，参考方法sunmi_print.printRawDat ...
uni-app文章详情-富文本展示 优雅展示代码块
在uni-app开发中，开发一个资讯详情页面，详情里包含图片和代码块。这时候用简单的rich-text控件已经不够用了。用官方demo里的html-parser.js也无法很好的展示代码区域。这个时候就要使用官方提供的插件来解决。
官方的这个插件有很多问题。需要使用第3方修复的版本：https://ext.dcloud.net.cn/plugin?id=1279
首先 ...
uni-APP使用lodop打印工具
公司仓库需要打印小票。最终效果如下图：
经过调查，首先选用了康虎云打印，原因是简单容易上手。但发现存在几个问题：
1、小票打印机，纸张的切刀操作，多执行了一次。采用的是小票打印机，专门购买了带切刀功能的，解决了撕纸缺口不整齐的问题。但采用康虎云打印的时候，发现在正确切纸完成后，会继续出纸2cm左右，然后 ...
uni-app swiper设置自定义高度
话不多少先上图，
大家可以看到图片中红色区域是头部区域，黄色区域则是我们要滑动的区域。
大家可以在uni-app官网上看到swiper高度是默认100%，而swiper-item则是要有固定宽高的，要的效果是什么呢？
1.点击tab可以切换黄色区域视图
2.滑动黄色区域改变视图，支持横向滑动以及纵向滑动 ...
uni-app部分坑
根据公司业务需求，选择了使用uni-app，从2019年7月底开始入坑，到至今已经有将近半年的时间，写了一个小程序，手机端H5,以及将小程序项目打包上架到iOS的App Store平台，下面记录一下这期间所遇到的坑，便于以后使用的时候查找：
1.uni-app开发工具
开发uni-app使用的工具是HBuilderX，里面的插件可以根据需求自己配置
2. ...
当 uni-app 遇见 vscode
uni-app 是一个用 vue 语法来开发小程序、App、H5 的框架，其官方推荐的开发工具为 HBuilderX，使用起来有很好的开发体验。
不过，由于 HBuilderX 没有 Linux 版以及很多前端之前已经习惯了 vscode，不想更换编辑器。直接使用 vscode 开发 uni-app，其体验并不是很好。
其实 uni-app 和 vscode 也可以很搭，接下 ...
uni-app,vue,react,Trao之缓存类封装
uni-app,vue,react,Trao之缓存类封装
一,介绍与需求
1.1,介绍
缓存主要分为如下几个
1、LocalStorage
LocalStorage是永久性的本地缓存，存储在客户端的浏览器上，除非主动删除，是不会过期的。LocalStorage采用的是键值对的方式进行存储，存储方式只能是字符串。存储内容可以用图片、json ...
uni-app开发注意事项及常用样式
注意事项
https://uniapp.dcloud.io/frame?id=template-block官方推荐：v-if写在<template/>标签中，v-for写在<block/>标签中它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性
https://uniapp.dcloud.io/use?id=%e4%ba%8b%e4%bb%b6%e5%a4%84%e7%90%86%e5%99%a8阻止冒泡事件：.stop例如：@tap.stop
methods ...
uni-app三目运算 uni-app监听属性
三目运算
<text>{{mag>10 ? '优秀' : ""}}</text>
三目运算的高级用法
大于1000用kg表示 小于1000，用g表示 添加括号是因为提高他的优先级哈
<text>{{weight > 1000 ? (weight/1000)+"kg" : weight}}</text>
uni-app监听属性 跟vue是一样的哈
点击【页面主操作 Normal】 就会触法watch监听的这个值哦！！！
监听 ...
uni-app 长按事件 事件目标元素 手机运行uni-app
longpress 长按就会触发哈
<view @click="clickTest">点击</view>
<view @longpress="logoTime"> 长按</view>
methods: {
clickTest(e){
// 获取元素目标
console.log(e.target)
},
logoTime(){
console.log("长按")
}
}
02==》 view下的文本是不可以赋值的 text的文本可以 ...
uni-app开发中的#ifdef MP是什么意思？条件编译
跨端兼容https://uniapp.dcloud.io/platform
uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。
但每个平台有自己的一些特性，因此会存在一些无法跨平 ...
uni-app实现app发送短信和读取短信
1、发送短信
uni-app没有对应API的接口，如果想实现发送短信的功能可以借助HTML5+ API的方式，使用发送短信接口，直接跳转到手机发送短信页面，支持编辑短信。
参考链接：
www.html5plus.org/doc/zh_cn/m…
to:收件人信息 字符串数组类型，输入的地址收件人信息必须符合消息类型格式。
cc:抄送人信息 字符 ...
uni-app开发中的#ifdef MP是什么意思？条件编译
跨端兼容
https://uniapp.dcloud.io/platform
uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。
但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。
大量写 if else，会造成代码执行性能低下和管理混乱。
编译到不同的工程后二次修改， ...
uni-app实现文件上传(h5方式)
1.嵌入H5页面，需要采用web-view标签，如下：
<web-view src="/hybrid/html/index.html" @message="handleMessage"></web-view>
注意：
h5页面必须在项目目录：/hybrid/html/下面，因为这样uni-app才不会进行编译
@message事件是h5页面向应用发送数据的回调
2.h5页面代码：
<!DOCTYPE html><html ...
uni.app图片同比例缩放
uni.app图片同比例缩放图片同比例缩放是经常用到的，刚开始设置了什么max-width、object-fit都不行，最后才知道uni.app里自带的mode属性可以解决这个问题，真是方便了很多。aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取aspectF ...
