uni-app如何使用vant-ui
1、前提:已经有uni-app项目
2、小程序版 Vant Weapp文档地址:https://youzan.github.io/vant-weapp/#/home
3、在项目中创建一个文件夹叫 wxcomponents,注意这个文件和pages文件夹平级。
4、前往https://github.com/youzan/vant-weapp下载压缩文件,将该项目的dist文件夹替换wxcomponents => vant下的dist文件夹
5、在根 ...
uni-app权限设置参数详情
uni-app权限设置参数详情
补充安卓:
用于进行网络定位: android.permission.ACCESS_COARSE_LOCATION
用于访问GPS定位: android.permission.ACCESS_FINE_LOCATION
获取运营商信息,用于支持提供运营商信息相关的接口: android.permission.ACCESS_NETWORK_STATE
用于访问wifi网络信息,wi ...
uni-app 获取 cookie 问题
在 PC 端的时候,对于后端返回的 cookie 我们是不用进行处理的。
浏览器会自动读取 response header 中的 set-cookie 信息保存,并在后续的 request 中带上。
但是在做小程序时,由于不能自动解析、带上 cookie 所以需要自己手动处理 cookie。
在使用 uni-app 时,uni.request 的 success 返回的参数有下面两个可以读 ...
uni-app全栈仿微信开源项目系列(三)
8.聊天信息设置页开发
1、新建页面chat-set.nuve
2、给chat.nvue中的free-icon-button组件绑定点击事件让其跳转到chat-set.nvue页面中。
3、编写chat-set.nvue页面的导航栏。
期间对导航栏组件做了下面优化。
新增showRightprops属性用于控制是否显示导航栏右侧图标以及弹出菜单
具体代码改动参考commits。
3、编写聊 ...
uni-app
1.简介
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
2.开发(混合开发注意点)
工具:HBuilderX 官网下载:https://www.dcloud.io/hbuilde ...
uni-app 微信支付
小程序 支付
先看官方文档 https://pay.weixin.qq.com/wiki/doc/apiv3/open/pay/chapter2_8_2.shtml
知晓有那些比不可少的流程,之后后端确定返回的参数值,用于前端支付。参数值必须一一对应,不然支付会失败
uni.requestPayment({
timeStamp: data.timeStamp, //当前的时间
nonceStr: data.nonceStr, / ...
uni-app中动态设置头部颜色及字体
应用场景:
需要根据后台设置不同项目的主题色,头部相应的出现颜色,查看我们的uni-app开发文档,发现我们可以用2种方法来实现。
方法一:
我们可以使用
uni.setNavigationBarTitle(OBJECT) 动态设置当前页面的标题
uni.setNavigationBarColor(OBJECT) 动态设置颜色跟背景色
以上2个具体用 ...
uni-app 第三方授权登录
注意:在使用uni-app第三方登录时采用的是手机真机调试
授权登录html
<view type="primary" class="login_type" v-for="(value,key) in providerList" @click="tologin(value)"
:key="key">
<view class="login_type_name">{{value.name}}</view>
</view>
<script>
import {
mapState ...
uni-app&H5&Android混合开发二 || 使用Android Studio打包应用APK
前言:
在上一章节我们已经讲了如何uni-app离线打包Android平台教程,这一章就该来讲讲如何使用Android Studio打包应用APK提供给Android手机安装使用了。
uni-app跨平台框架介绍和快速入门
uni-app跨平台框架介绍和快速入门
第一步、首先打开已经编译好的Android项目:
第二步、选择Build>Generate Signed APK or A ...
解决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:"苹 ...