【小程序】使用uni-app搭建小程序环境---图片懒加载
属性:
属性名类型默认值说明平台差异说明
src
String
图片资源地址
mode
String
'scaleToFill'
图片裁剪、缩放的模式
lazy-load
Boolean
false
图片懒加载。只针对page与scroll-view下的image有效
微信小程序、5+APP、百度小程序、头条小程序
@error
HandleEvent
当错误发生时,发 ...
【小程序】使用uni-app搭建小程序环境之框架
开发目录为:
┌─pages
│ ├─index
│ │ └─index.vue
│ └─login
│ └─login.vue
├─static
├─main.js
├─App.vue
├─manifest.json //文件是应用的配置文件,用于指定应用的名称、图标、权限等
└─pages.json //文件用来对 uni-ap ...
【小程序】使用uni-app搭建小程序环境调用
什么是uni-app:
官方:uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。
即使不跨端,uni-app同时也是更好的小程序开发框架。
白话儿:就是一个可以搭建各个平台的前端框架
...
uni-app 中如何管理用户登录状态
简介
uni-app 中不支持读写 cookie,所以不能如传统的应用那样通过读取 cookie 来判断是否是登录状态。
在 uni-app 进行登录操作时,可以将需要校验的数据放在 uni.request 的 data 中,也可以在 header 里设置 token,使用 token 进行登录状态校验。
流程:首页为未登录状态 => 进行登录 => 首页状态改变 => 退出应 ...
小程序跨端框架(taro/uni-app/kbone)横评之2020版
微信竟然推出了跨端的kbone,说明跨端的开发已经深入人心;又是新的一年过去了,小程序开发领域又有哪些新的变化?我们来看如下最新的评测文章,可惜没有wepy 2.0的测评。
本文经授权转载,如下为原文,enjoy!
又是一年四月天,距离上次发布跨端开发框架深度横评已过去整整一年。
这一年,小程序在用户规模及商业化方面都 ...
uni-app介绍文档总结
开发规范
基础组件
uni-app 为开发者提供了一系列基础组件,类似 HTML 里的基础标签元素。但 uni-app 的组件与 HTML 不同,而是与小程序相同,更适合手机端使用。
虽然不推荐使用 HTML 标签,但实际上如果开发者写了 div 等标签,在编译到非 H5 平台时也会被编译器转换为 view 标签,类似的还有 span 转 text、a 转 navig ...
uni-app vue-cli命令行
uni-app vue-cli命令行
除了HBuilderX可视化界面,也可以使用 cli 脚手架,可以通过 vue-cli 创建 uni-app 项目。
环境安装
全局安装vue-cli
npm install -g @vue/cli
创建uni-app
使用正式版(对应HBuilderX最新正式版)
vue create -p dcloudio/uni-preset-vue my-project
使用alpha版(对应HBuilderX最新alpha版 ...
iOS uni-app原生插件开发
iOS uni-app原生插件开发
开发准备
OS X 10.14.0+
Xcode 11.0+
weex扩展API for iOS
Native 对外接口
注册 SDK 默认的 Module、Handler 和 Component
注册自定义 module、Handler 和 Component
重置 JSFramework
Handler (对应于 Android 的 Adapter) 介绍
WXImgLoaderDefaultImpl 图片下载 handler。 ...
uni-app微信小程序登录授权
微信小程序授权是非常简单和常用的功能,但为了方便,还是在此记录一下要点:
首先是需要用到一个授权按钮来触发获取用户信息授权: 关键在于 open-type 为 getUserInfo , 然后有个@getuserinfo的事件,把获取授权接口写到该事件里面去
<button class="sys_btn" open-type="getUserInfo" lang="zh_CN" @get ...
在uni-app中使用iconfont
先贴出uniapp官方icon的说明文档:https://uniapp.dcloud.io/component/uniui/uni-icons
1、挑选iconfont图标,添加至项目中。并下载至本地
2、在项目static文件夹中新建iconfont文件夹,将下载文件中的iconfont.css移入此文件夹
ps:如需给页面导航栏配置自定义图标,则需要iconfont.ttf文件,也可移至static/iconfont文件 ...
移动端开发基础【2】uni-app项目调试
上一期我为大家分享了uniapp项目的基本开发环境以及基本的一些工具的配置,本期我将为大家接着分享uniapp项目调试这一块的知识。有兴趣的朋友可以进来看看。
调试uni-app项目
1、浏览器项目调试
uni-app支持多个端同时调试,调试之前我们首先要配置一下浏览器的安装路径,默认HBuilder是检测不到的。点击【运行】->【运行到 ...
vue h5转换uni-app
如果你已经有了一个基于vue开发的H5站点,想转换为uni-app。
首先注意2个前提:1、你的web站是适合手机屏幕的;2、你的H5代码是全后端分离的,uni-app只处理前端代码。
一切从新建一个uni-app项目开始。然后依次进行
文件处理
把之前的vue web项目的前端代码copy到新项目下
如果之前的文件后缀名是.html,需要改为.vue,并 ...
uni-app 下拉刷新 上拉加载
首先在page页面设置enablePullDownRefresh属性 激活下拉
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
"enablePullDownRefresh":true
}
}
index.vue
<template>
<view>
<vi ...
uni_app系列
uni_app纯前端页面
00 基本操作
01 封装图文列表样式:(封装css样式)
02 全局组件+优化列表组件:(动画,关注,顶踩,scroll-view,swiper)
03 顶部选项卡+顶部选项卡内容:(scroll-view+swiper组合用法)
04 优化列表页面+下拉加载+处理无数据情况
05 搜索页开发:(收起键盘事件,导航栏相关监听)
06 自定义导航 ...
uni-app 开发 app
1、关于uni-app 框架配置下面这个是创建uni-app项目的基本目录结构)
pages.json 文件用来对uni-app 进行全局配置,决定页面文件路径,窗口样式,原生导航栏,底部的tabbar 等等。(类似于小程序 中的 app.sjon )example:(下面这个是包含了所有配置选项的 pages.json ){ "pages":[{ "path":"pages/index/index", ...
Uni-app 之APP和小程序微信授权登录
一、APP
<template>
<view>
<!-- #ifdef APP-PLUS -->
<button class="" @click="appLogin">APP微信授权登录</button>
<!-- #endif -->
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad(op ...
uni-app 知识点
---【uni-app】:
是一个使用vue。js开发所有前端应用的框架,开发者编写一套代码,可发布到ios,android,H5,以及各种小程序,
(微信/支付宝/百度/头条/QQ/钉钉)等多个平台
---【环境搭建】:
1,安装APP开发版HBuilderX
2,安装微信开发者工具
---【使用HBuilderX初始化项目】:
1,点击HBuilderX菜单 ...
uni-app添加自定义底部导航栏,实现根据权限动态切换底部栏目的功能
uni-app针对底部导航栏TabBar,只提供了动态修改样式文字和图标的API,并没有提供动态修改某个栏目的跳转链接、追加或者删除某个栏目的功能。
问题阐述:实际开发的项目中的确需要判断登录账户的权限,来动态显示某两个,或者某三个栏目
如:管理用户显示【首页,管理,我的】,普通用户显示【首页,我的】,中间的 ...
基于uni-app开发微信小程序__手牵手带你开发【懂你找图】项目
前戏
某一天的夜里,敲完了代码之后便直接倒在床上睡着了,醒来时只记得梦里的一句话:“想要成为高手,就必须要大量实践,大量做项目,必须要把自己不会的东西全部吃透,不要得过且过。”,猛然想起是一位大神前辈对我说的,工作之后每天加班,回家之后就不想学习了,总想着一把锤子搞定所有钉子,这样是不行的,于是我就 ...
微信小程序转化为uni-app项目
前言:
之前自己做一个uni-app的项目的时候前端需要实现一个比较复杂的动态tab和swiper切换的功能,但是由于自己前端抠脚的原因没有写出来,然后自己在网上搜索的时候发现了有个微信小程序里面的页面及极其的符合我的需求。那么问题来了我该如何将微信小程序转为为uni-app项目呢?搜索了下网上的相关解决方案还真有个将 ...