解决sockjs、stomp在uni-app端使用的坑
我们项目之前前后端使用的是Stomp + SockJs实现的在线直播的实时聊天,现在需要搬到app上,所以要在uni-app上面也实现一次,结果就很自然的出问题了。下面整理一下在uniapp整合WebSocket中遇到的bug。
1、第一次尝试
先像web开发一样去写:先引入stomjs和sockjs包,然后用 new SockJS(url) 的方式去实例化SockJs, ...
uni-app&H5&Android混合开发一 || 最全面的uni-app离线打包Android平台教程
前言:
为什么会写这么一个教程,因为很久之前做过一个对接银行POS我们的系统是使用的H5开发的app应用。但是假如对结果银行相关业务的小伙伴应该都清楚,银行的业务相对于其他的对接方而言安全性比较高,而且一般都不会提供定制开发,所以只能我们自己来实现与他们的对接。因此我们把支付这一块做成了Android原生的对接 ...
uni-app创建项目及使用 vant-weapp
创建项目
一、 使用 DCloud 公司提供的 HBuilderX 来创建项目
https://uniapp.dcloud.io/quickstart-hx
二、 使用脚手架搭建项目 ( 以微信小程序为例 )
全局安装 npm install -g @vue/cli
创建项目 vue create -p dcloudio/uni-preset-vue my-project
选择模板(这里选择了默认模板):
创建成功
启动项目(微信小 ...
uni-app:授权(以微信小程序为例)
说明
个人使用环境说明
设备环境:win10 64bit
编译环境:HBuilder X
运行环境 :微信开发者工具、真机
其他说明
在微信小程序中,在调试模式、开发者模式中,调用用户信息默认失败。发布后,可以根据实际用户授权返回授权的结果。
由于如果用户之前拒绝过授权,此接口会直接调用师表回调。一般搭配uni.getSetting(获取 ...
Uni-app: 扫码(以微信小程序为例)
说明
个人使用环境说明
设备环境:win10 64bit
编译环境:HBuilder X
运行环境 :微信开发者工具
其他说明
在微信开发者工具中,无法扫码。需要真机验证。
调用
调用方法
uni.scanCode(Object)
功能
调起客户端扫码界面,扫码成功后返回对应的结果。
平台差异说明
App
H5
微信小程序
支付宝小程序
...
如何在Uni-App中集成ShareSDK
ShareSDK是一种社会化分享组件,免费为App提供社会化功能,我们也推出众多平台的SDK以及插件,近期刚刚上线Uni-App的插件集成,本文讲述的是如何在Uni-App中集成ShareSDK。
一.准备
1.下载开发工具HBuilderX
2.准备Uni-App项目(如果没有已经创建好的项目,可以自行创建新的项目)
之后选择新建Uni-A ...
uni-app 微信小程序授权登录
1.微信小程序 获取用户信息 与获取手机号
详细信息看官方公告:https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801
回收uni.getUserInfo接口可获取用户授权(返回的全部是匿名数据)
4月28日24时后发布的新版本小程序,开发者调用wx.getUserInfo或<button open-type="getUserInfo"/ ...
uni-app 唤醒调用第三方app
如果不知道另一个app的包名
安装反编译软件如APKtool
包名:
启动页activity
调用方代码
//判断app是否存在
if(plus.runtime.isApplicationExist({pname:'com.inspur.jkmateriel'})){
console.log("该app ...
uni APP 微信小程序获取授权的微信信息
根据微信小程序开发文档,获取用户信息的接口有3个UserInfo,wx.getUserInfo,wx.getUserProfile。
UserInfo比较老就不用了。wx.getUserInfo基础库版本 2.3.1 以后支持,但是必须用户授权 scope.userInfo。
wx.getUserProfile 基础库 2.10.4 开始支持,获取用户信息。页面产生点击事件(例如 button&nb ...
uni app 微信小程序登录问题 getUserProfile
uni app 开发微信小程序发布后被拒绝了,是因为我用的是以前的微信登录方式
4.13号后一定要来新的登录方式(getUserProfile)实现登录功能,否则腾讯被拒绝。
不需要以前那样什么open-type等等;直接用@click方法调用
<button @click="newWxLogin">新登录</button>
newWxLogin(){
uni.getUserProfile({
d ...
uni-app中使用vuex
项目中难免都会用到vuex,下面我总结了一下在uni-app中如何使用vuex
首先新建文件store/index.js
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
export default new Vuex.Store({
// 全局属性变量
state:{ // state的作用是定义属性变量。定义一个参数
num:0,
price:10,
name:"苹 ...
uni-app开发经验分享二十二: uni-app大转盘思路解析
最近在研究uni-app,制作了一个很有意思的集合项目demo,这里给大家分享下大转盘的前端设计思路
需求案例:大转盘抽奖
线上demo查看:
案例效果:
制作思路:
前端大转盘使用css3动画来做,在开始做的时候,我思路上碰到一个问题,抽奖结果是我前端给后台还是后台给我,最后我发现,只有后台传结 ...
uni-app 无法跳转页面
因为一段时间没用 uni-app,在今天添加的页面跳转时没有效果,pages.json 文件也注册了形式和以前一致,后面才发现是跳转路径的问题。
// pages.json
{
"pages": [
// ...
{
"path": "pages/about/about",
"style": {
"navigationBarTitleText": "关于",
"enablePullDownRefresh": f ...
uni-app 下拉刷新 配置 手动调用 停止下拉刷新
onPullDownRefresh在 js 中定义 onPullDownRefresh 处理函数(和onLaunch,onLoad,onShow等生命周期函数同级),监听当前页面用户下拉刷新事件。
首先需要在 pages.json 里,找到的当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh。
{
"pages": [
{
...
uni-app 下使用ECharts
关键词:uni-app;ECharts;
认知尚浅,如有高见,愿闻其详。
前言:本次的教程与上次的基于WePY 2.x平台下使用ECharts方式基本一致,毕竟目标平台都是微信小程序而已(别的平台未测试),只是就是多了一个参数而已。
本次使用的是仍然是echarts-for-weixin组件,其对小程序进行了兼容适配,我们进行直接下载项 ...
uni-app:使用字体图标(iconfont和yticon)
font-class引用
font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。与unicode使用方式相比,具有如下特点:
兼容性良好,支持ie8+,及所有现代浏览器。
相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
因为使用class来定义图标,所以当要替换图标时,只需要修 ...
uni-app 使用 nvue 开发 app 踩坑指南 All In One
uni-app 使用 nvue 开发 app 踩坑指南 All In One
uni-app是逻辑和渲染分离的。渲染层,在app端提供了两套排版引擎:小程序方式的webview渲染,和weex方式的原生渲染。
两种渲染引擎可以自己根据需要选。vue文件走的webview渲染,nvue走的原生渲染。
组件和js写法是一样的,css不一样,原生排版的能用的css必须是flex布局, ...
uni-app:uCharts的使用步骤
为何不用Echarts
相比Echarts及F2的复杂的设置,本插件几乎等于傻瓜式的配置。
Echarts在跨端使用更复杂,本插件只需要简单的两个<canvas>标签轻松区别搞定,代码整洁易维护。
Echarts在IOS端图表显示错位,只能引用网页解决。
本插件打包后的体积相比Echarts小很多很多,所以性能更好。
如果您是uni-app初学者,那么强烈 ...
uni-app 中使用组件
在uni-app中,可以通过创建一个后缀名为vue的文件,即创建一个组件成功,其他组件可以将该组件通过impot的方式导入,在通过components进行注册即可
使用方式和生命周期跟vue一样,具体参考
使用:https://www.cnblogs.com/makalochen/p/13870097.html
单文件组件:https://cn.vuejs.org/v2/guide/single-file-components.ht ...
uni-app 两种方式导航跳转和传参
声明式跳转
navigator
页面跳转。
该组件类似HTML中的<a>组件,但只能跳转本地页面。目标页面必须在pages.json中注册。
该组件的功能有API方式,另见:https://uniapp.dcloud.io/api/router?id=navigateto
属性说明
属性名
类型
默认值
说明
平台差异说明
url
String
应用内的跳转链接,值为相对路径或绝对路径,如 ...