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搜索功能前后端开发(页面)
博客说明
文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!
借助的插件地址
插件地址
展示
前端是使用vue,后端使用Java的springBoot开发
监控搜索框
uni-app
注意根据自己的需求来改
async getSearch(keyword) {
...
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 ...
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从零开发一款视频小程序 (系列下 开发实战篇)
前言
好久不见,很久没更新博客了,前段时间在深圳出差,胡吃海喝颓废了很久,不想每天下班刷抖音、打游戏虚度光阴,准备把之前做的一个小程序案例详细的介绍一下,从安装编译器 ...