UNI-APP常用方法
1、判断第三方程序是否已存在
Boolean plus.runtime.isApplicationExist(appInf);
如果第三方程序已安装则返回true,未安装则返回false。
appInf: ( ApplicationInf ) 必选 要判断第三方程序的描述信息
Android平台需要通过设置appInf的pname属性(包名)进行查询。 iOS平台需要通过设置appInf的acti ...
uni-app 本地访问接口跨域
uni-app在本地访问接口跨域,可进行如下配置:
需要在manifest.json的源码中找到h5,添加以下代码:
"devServer" : {
"proxy" : {
"/dpc" : {
"target" : "****", //域名
"changeOrigin" : true,
"secure" : false,
...
uni-app引入vant weapp
之前做了一段时间的Android原生开发,发现我的布局实在是不堪入目,就想找一些开源的UI库。后来学习了Vue,就觉得Vue真的很好用,就想能不能用Vue开发android app,在网上找了半天,发现了uni-app,然后又找了一下UI库,听说vantui不错,就看了一下,果然挺好。但是在uni-app里面直接使用vantui是不可以的,因为它是针对h5 ...
uni-app开发注意事项
关于vue
1、注意 如果使用老版的非自定义组件模式,即manifest中"usingComponents":false,部分模版语法不支持,但此模式已于2019年11月起下线。
2、data 必须声明为返回一个初始数据对象的函数;否则页面关闭时,数据不会自动销毁,再次打开该页面时,会显示上次数据。
3、class 支持的语法:
<view :class="{ active: isAc ...
uni-app国际化中的中英文切换按钮实现
前面所写的是静态的国际化切换方式:https://www.cnblogs.com/yoona-lin/p/13594447.html
uni-app系列回顾总结----项目国际化2(翻译问题与解决方案)总结
现在通过页面的按钮进行中英文切换
如图:
实现:
// main.js// 国际化模块
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
if ...
uni-app 开发随笔(踩坑记录)
这里总结一些uni-app开发时我遇到的坑
uni-app获取元素高度及屏幕高度(uni-app不可使用document)
uni.getSystemInfo({
success: function(res) { // res - 各种参数
console.log(res.windowHeight); // 屏幕的宽度
let info = uni.createSelectorQuery().select(".元素");
info ...
uni-app省市区地址选择器
1 //支持h5 小程序 app
2 //调用示例
3
4 <template>
5 <view class="content">
6 <pickerAddress @change="change">{{txt}}</pickerAddress>
7 </view>
8 </template>
9
10
11 import pickerAddress from 'pickerAddress.vue'
12 export default {
13 components:{
14 ...
UNI-APP上拉分段加载数据
背景:
测试APP时,发现列表数据上拉加载有毛病,要么显示不了所有数据,要么显示的数据有重复。经查看,是获取数据的API有分页参数(page和size),但是只是分页,而不是分段。换句话说,查询第二页的数据会连同第一页的数据一起返回,为了锻炼自己,决定从有瑕疵的前端解决这个问题。
思路:
1、获取数据的分段处理
...
uni-app实现图片上传,添加展示与删除
如图,uni-app实现图片上传,添加展示与删除
<!-- 上传照片 -->
<view class="item-num">
<view class="upload-img">
<!-- 预览缩略图 -->
<view class="q-image-wrap">
<!-- 图片缩略图 -- ...
uni-app离线打包步骤
=== IOS 篇 ===
一、官网的打包指南链接:https://nativesupport.dcloud.net.cn/AppDocs/usesdk/ios
二、具体实践步骤:
1、准备HBuilderX编辑器、 Xcode (用于把生成的本地APP资源进行编译打包成APP)
2、App离线SDK下载 下载 (用于Xcode打开的'项目'),下载时需要注意的是;SDK的版本需要与相应的HBuilderX版本进行配 ...
uni-app实现点击弹窗输入文本的交互操作(3)(组件化)
uni-app实现点击弹窗输入文本
写成组件
前面的学习:
uni-app实现点击弹窗输入文本的交互操作
uni-app实现点击弹窗输入文本的交互操作(2)
组件形式:
主页面:
<view class="login">
<view class="login-btn" @click="show">
<prompt ref="prompt" @onConfirm ...
uni-app如何配置多环境?
最近我也在配置uni-app的多环境,在官方社区找到了解决方法参考一下社区的解决方案:https://ask.dcloud.net.cn/que...在根目录下创建.env.js,.env.dev.js,.env.prod.js这三个文件。.env.js
;
(function() {
const NODE_ENV = 'dev'; // dev:开发环境 | test:测试环境
let ENV_VAR = null;
if (pro ...
Vue uni-app前端生成二维码
今天来谈一下前端如何生成二维码。
对于APP应用而言,市场推广是必不可少而且是最为烧钱的阶段,那么,为满足市场推广的需求,仅仅是微信,QQ,朋友圈等连接分享的方式是不够的,当然还得包括面对面分享,那么市场人员的二维码就显得必不可少了。那又如何动态生成二维码呢,本来打算是让后端生成返回前端进行展示的,但是后 ...
uni-app H5 腾讯地图无法导航
uni-app 打包H5腾讯地图无法导航
具体使用扫描二维码查看
前言:
最近几天用uni-app开发安卓和iOS应用,打包成APP安装包后,APP内做地图导航没有问题,APP内使用的是高德地图;但是打包成为H5页面后,运行在微信内置浏览器或者运行在第三方浏览器(UC/QQ浏览器),默认运行的是腾讯地图,地图可以打开,却无法进行 ...
uni-app-条件注释
官方文档
<!-- #ifdef %PLATFORM% -->
平台特有的组件
<!-- #endif -->
示例,如下公众号关注组件仅会在微信小程序中出现:
<view>
<view>微信公众号关注组件</view>
<view>
<!-- uni-app未封装,但可直接使用微信原生的official-account组件-->
<!-- #ifdef MP-WEIXIN -->
...
uni-app-网络请求
官方文档
uni.request(OBJECT)
发起网络请求。
在各个小程序平台运行时,网络相关的 API 在使用前需要配置域名白名单。
OBJECT 参数说明
参数名类型必填默认值说明平台差异说明
url
String
是
开发者服务器接口地址
data
Object/String/ArrayBuffer
否
请求的参数
App(自定义组件编 ...
uni-app
网络模型
前后端分离,通过js api(类似ajax的uni.request)获取json数据,把数据绑定在界面上渲染
文件类型
现在是.vue文件,开发是vue,经过编译后,运行时已经变成了js文件。现代前端开发,很少直接使用HTML,基本都是开发、编译、运行。所以uni-app有编译器、运行时的概念。
代码架构
现在template是一级节 ...
uni-app-样式
官方文档
rpx即响应式px,一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,750rpx为屏幕宽度,屏幕变宽,rpx实际显示效果会等比放大
使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束
支持基本常用的选择器class、id、element等
在uniapp中不能使用*选择器
page ...
uni-app设置APP引导页
uni-app作为多端应用的开发框架,很多人都在使用,当开发APP时,未优化用户体验,APP的引导页必不可少。在次贴出使用方法,便于码友们参考。
在page.json文件里面注入路径,并设置:
{ "path" : "pages/index/guidePage/guidePage", "style" : { "app-plus":{ "titleNView":false //禁用原生导航栏 } ...
uni-app-组件
官方文档
概述
uni-app提供了一系列基础组件,使用它们可以使界面风格统一,同时,不推荐使用HTML组件
原因:如果开发者写了div等标签,编译到非h5平台会被编译器转换为view标签,使用内置基础组件可以方便管理代码,并且可以通过基础组件开发扩展组件
text文本组件
属性说明
属性名类型默认值说明平台差异说明
select ...