【uni-app】easycom模式(自动按需引入组件)
传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下,并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册,直接在页面中使用。 如下:
<template>
<view class="container">
<uni-list>
<uni-list ...
uni-app初探之天气预报小例子
概述
在实际工作中,App既需要支持Android手机,又要支持IOS手机,还要支持微信小程序,公众号等,面对这样的需求,是否劳心费力,苦不堪言,还要考虑各平台的兼容性。现在uni-app以“开发一次,多端覆盖”的理念,海纳百川,求同存异,受到大多数开发者的青睐。uni-app是采用vue.js作为开发前端应用的框架,开发者编写一套 ...
uni-app 实现轮播图 【数字胶囊】
官网:https://uniapp.dcloud.io/component/swiper
效果图:
<view class="swiper">
<swiper :interval="3000" :duration="1000" :indicator-dots="false"
:current="topSwiperIndex" @change="topSwiperTab">
<swiper-item v-for="(item,index) in topSwiper" :key="index">
...
uni-app的app打包过程
https://nativesupport.dcloud.net.cn/AppDocs/README
https://blog.csdn.net/u012375924/article/details/85716965?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distrib ...
uni-app中web-view打开三方界面并跳转小程序相关页面
最近在项目中遇到这么一个需求,需要在小程序中跳转第三方界面,认证通过后跳转三方界面,整理了一下代码,做个记录
1.小程序中新建一个vue文件用作承载web-view
<template>
<view>
<web-view :src="url"></web-view>
</view>
</template>
<script>
export default {
data() {
r ...
基于uni-app的微信小程序之分包
作者:故事我忘了¢个人微信公众号:程序猿的月光宝盒
目录0. 缘由1. 关于分包1.0 这是 官方文档1.1 注意事项2.使用方法2.1 首先你得有个uniapp的微信小程序项目2.2 在pages同级创建分包2.3 pages.json配置2.4 然后呢,官网支持了 分包优化2.5 怎么跳转呢?2.6 然后重启微信开发工具运行
0. 缘由
最近工作在接触uni-app,用 ...
uni-app开发的app版本更新
标签: uni-app 版本更新
前情
uni-app是我很喜欢的跨平台框架,它能开发小程序,H5,APP(安卓/iOS),对前端开发很友好,自带的IDE让开发体验也很棒,公司项目就是主推uni-app。而是app版本更新是最基本的功能,特记录整个踩坑过程。
版本更新
更新主逻辑
在每次app启动并登录成功的时候做一个版本检测,如果当前版本小于服 ...
uni-app实战 | 第一篇:从0到1快速开发一个开源商城微信小程序,无缝接入Spring Security OAuth2认证授权实现登录
一. 前言
本篇通过实战来讲述如何使用uni-app快速进行商城微信小程序的开发以及小程序如何接入后台Spring Cloud微服务。
有来商城 youlai-mall 项目是一套全栈商城系统,技术栈是分布式微服务加上前后端分离模式,所以在本篇项目实战开始之前需要一些往期文章作为基础。
后台微服务
Spring Cloud实战 | 第一篇:Windows ...
Uni-App 启动页和引导页介绍
Uni-App 启动页和引导页介绍
Uni-App 启动页和引导页是两个不同的东西,启动页是 Uni-App 自带的,不可去掉,只能修改相关配置。而引导页完全是需要开发者自行开发的。
上面的图,就是Uni-App 启动页,那开发者可以对它进行哪些配置呢?
可以配置:1、是否等待首页加载完成在关闭启动界面
设置为true,则splash的关闭逻 ...
uni-app subNVue 原生子窗体简单使用案例(app端)
开头先放一些需要大概了解的官方文档链接地址
https://uniapp.dcloud.io/use-weex
https://uniapp.dcloud.io/api/window/subNVues
https://weex.apache.org/zh/docs/api/weex-variable.html
1、新建一个 uni-app 项目(使用 Hbuilder X)
2、项目结构如下( 在 pages 目录下的 index 目录 ...
uni-app 调用h5+接口,实现整包更新
// APP整包更新 //#ifdef APP-PLUS let thatProgress=this; console.log(thatProgress.progress) let server = this.constant.baseUrl+"/system-service/api/app/update"; //检查更新地址 plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) { uni.request({ url: server+' ...
[FE] uni-app Card 卡片组件 uni-card 用法
使用 uni-card 和其它组件没有什么区别,关注支持的属性和事件即可。
对于属性,需要特别注意值的类型,比如不要把非字符串的当做字符串处理。
举例,如下 is-full 需要 Boolean 类型,但是我们使用了字符串。
<uni-card
is-full="true"
:is-shadow="true"
...
uni-app实战教程
uni-app:学习使用门槛低,vuejs语法,一套代码多种编译方式多个平台运行,抛开这些兼容性不说,单单用来开发小程序也是最佳的选择
一:下载配置Hbuilder X
新建uni-app项目,包含模板,可选择支持scss语法
二:项目目录结构
components: uni-app组件目录
pages:项目文件目录
static:静态资源文件(图片、字体图标)
wxco ...
[FE] uni-app Grid 宫格组件 uni-grid 用法
文档上的描述是比较简陋的,不明所以。
核心就是两块内容,一个是 uni-grid 可以加 change 事件;另一个是 uni-grid-item 上面 index 属性值会作为 change 指定函数的参数一部分返回,格式是 {detail:{index:0}}
举例,局部代码如下:
<uni-grid :column="3" @change="gridClicked">
<uni- ...
uni-app 基本配置pages,json
{
// 打开页面的路径
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
// 在第一位的事默认打开的页面
{
"path": "pages/message/message",
// 这是本页面的样式,这个样式权重大于全局
...
uni-app怎么使用路由守卫,并且路由配置和pages.json中只写一套
背景
uni-app本身没有路由,无法使用路由守卫。
那么有这么一个功能: 当某些页面需要登录,进入之前需要判断是否登录,如果没有登录则跳转到登录页。
可以封装公共方法或混入实现,但是不太优雅,这时使用路由守卫实在是太方便了!
幸好,插件uni-simple-router给我们提供了
1. uni-simple-router使用方法
uni-simple-rout ...
uni-app中使用svg
标签: svg js uni-app
前情
uni-app是我很喜欢的跨平台框架,它能开发小程序,H5,APP(安卓/iOS),对前端开发很友好,自带的IDE让开发体验也很棒,公司项目就是主推uni-app。
解决方案
最近在做一个需求,logo等png小图片在部分设备下会变糊,又不想做大图来缩放解决,于是考虑换成SVG,
uni-app目前不支持svg标签,只能通 ...
uni-app支付功能
扫码查看原文
前言
近期一直在使用APP开发多端应用,IOS的APP、安卓的APP和H5网页,其中开发的APP使用到了微信和支付宝的支付,在此给大家分享出来,一起使用
前置条件:
开发环境:windows
开发框架:uni-app , H5+,nativeJS
编辑器:HbuilderX 2.8.13
4.兼容版本:安卓,IOS已作测试 ...
uni-app下载文件在ios下失败
标签: js uni-app
前情
uni-app是我很喜欢的跨平台框架,它能开发小程序,H5,APP(安卓/iOS),对前端开发很友好,自带的IDE让开发体验也很棒,公司项目就是主推uni-app。
坑位
最近在做一个需求,需要在uni-app下载zip,word,pdf文件并打开浏览,发现在安卓下是正常的,但是在IOS下一直失败。
Why
其实是文件名用中文命名导 ...
uni-app页面title问题
问题:一开始在uni-app里pages.json的title怎么设置都显示首页
{
"path": "pages/completionPlan/index",
"style": {
"navigationBarTitleText": "计划",
"enablePullDownRefresh": true
}
},
解决方案:在页面的js里加入titleFix
import titleFix from "@/utils/mixins/titleFi ...