Taro
神奇大叔
这个作者很懒,什么都没留下…
展开
-
taro 分包中共用的依赖打包到分包中(Echarts)
Echarts为例:目录结构:app.config.json中配置:echarts为什么会被打包进主包中?虽然引入的ec-canvas组件(echarts-for-weixin)是在分包中使用,但echarts被echarts-for-weixin组件和外部业务组件所依赖,导致Taro认为echarts.js被多个模块所依赖,所以打包到common.js。导致主包大于2M失效在config/index.js中配置mini: { addChunkPages(pages) {原创 2022-04-05 17:27:27 · 1878 阅读 · 0 评论 -
taro 设置右上角省略号分享、分享到朋友圈、分享群聊获取更多消息、收藏
分享: 在要分享的页面的js文件中设置: onShareAppMessage:function(from,target,webViewUrl) { 参数: from 转发事件来源。button:页面内转发按钮;menu:右上角转发菜单 target 如果 from 值是 button,则 target 是触发这次转发事件的 button,否则为 undefined webViewUrl 页面中包含web-view组件时,返回当前web-view的url原创 2020-10-09 16:33:25 · 3092 阅读 · 0 评论 -
taro 调用系统相册chooseImage
Taro.chooseImage({ count:n, 允许选择的照片数量,默认为9 sizeType: ['original', 'compressed'], 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera','user','environment'], 可以指定来源是相册还是相机,默认二者都有,在H5浏览器端支持使用 `user` 和 `environment`分别指定为前后摄像头 ..原创 2020-10-08 17:45:00 · 3273 阅读 · 0 评论 -
taro 长按保存照片到系统相册getImageInfo、saveImageToPhotosAlbum
(1)通过长按事件获取到照片路径(或ref获取dom对象) 因通e无法获取到src属性,固添加自定义属性为照片url地址 <Image className='m-i' data-url={'xx.jpg'} onLongPress={this._LongPress} src='xx.jpg'/> (2)onLongPress长按事件中获取到照片url e.target.dataset.url (3)通过Taro.getImageInfo获取到照片的本地路径 Tar.原创 2020-10-08 17:21:09 · 1479 阅读 · 0 评论 -
taro 使用云函数
使用云开发必须配置appid在默认的taro模板中,配置云函数对应的文件不会打包,所以在打包后的微信开发者中配置1、在project.config.json中添加 "cloudfunctionRoot":"./云函数文件夹名",2、在打包后的微信开发者工具中 创建1中对应的文件夹3、创建云函数 在2中创建的文件夹右键创建node.js云函数,创建的云函数文件夹名即为云函数名 会自动创建如下代码:event来获取传入的参数 // 云函数入口文件 const cloud =原创 2020-10-07 17:06:54 · 1451 阅读 · 1 评论 -
taro 用户授权和引导再次授权案例
import React, { Component } from 'react'import { connect } from 'react-redux'import { View, Button, Text,ScrollView } from '@tarojs/components'import { AtButton } from 'taro-ui'import Taro from '@tarojs/taro'import './index.less'import TopSearch fr原创 2020-10-05 17:05:14 · 879 阅读 · 0 评论 -
taro 登录案例
import Taro from '@tarojs/taro'import {View,Text,Button} from '@tarojs/components'import React,{Component} from 'react'import './index.less'import {loginCode} from '../../utils/api/index'class Login extends Component{ //验证是否登录,进行自动登录的操作 asy原创 2020-10-05 16:24:33 · 1740 阅读 · 1 评论 -
taro 获取用户权限以及弹窗提醒
(1)打开后台授权信息控制台: Taro.openSetting({ success: function (res) { console.log(res.authSetting) } })(2)获取用户的授权信息 Taro.getSetting({ success: function (res) { res.authSetting['xx'] } })(3)弹出窗口进行授权操作原创 2020-10-04 21:03:15 · 3016 阅读 · 0 评论 -
taro 获取用户地理位置信息、通过腾讯地图获取城市等信息
1、在app.config.js中设置 "permission":{ "scope.userLocation":{ "desc": "获取地理位置信息的用途描述" } }2、授权成功后,通过Taro.getLocation获取地理位置信息 Taro.getLocation({ type: 'wgs84', success: function (res) { console.log(res);原创 2020-10-04 20:55:17 · 5353 阅读 · 0 评论 -
taro 获取用户信息getUserInfo、OpenData
getUserInfo: (1)给按钮添加属性和回调 openType='getUserInfo' onGetUserInfo={this.回调} (2)在允许获取信息后,通过Taro.getUserInfo获取 方式一 Taro.getUserInfo({ success: function(res) { console.log(res.userInfo); } })原创 2020-10-04 20:18:05 · 3084 阅读 · 0 评论 -
taro 获取dom节点信息
直接在生命周期函数中获取值为null 方式一:再加个延迟200毫秒的函数获取1、创建选择器 const query = Taro.createSelectorQuery(); 将选择器的选取范围更改为自定义组件component内.(初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点) const query = Taro.createSelectorQuery().in(this);2、查询 获取单个 query.select('选择器').boundingCli原创 2020-09-28 22:42:14 · 7451 阅读 · 0 评论 -
taro 视频播放组件Video
1、使用 <Video src='https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd9302045原创 2020-09-27 15:30:37 · 7539 阅读 · 2 评论 -
taro 获取用户设备信息
使用: Taro.getSystemInfo({ success(res) { console.log(res.statusBarHeight); } }) 参数: SDKVersion 客户端基础库版本 albumAuthorized 允许微信使用相册的开关(仅 iOS 有效) benchmarkLevel 设备性能等级(仅Android小游戏)。取值为:-2 或 0(该设备无法运行小游戏),-1(性能未知),>=1(.原创 2020-09-26 14:05:36 · 2197 阅读 · 1 评论 -
taro 滚动组件ScrollView
1、使用 import { ScrollView } from '@tarojs/components' <ScrollView className='scrollview' scrollY 指定滑动方向 scrollWithAnimation 开启滑动动画 enableBackToTop 点击顶部标题栏滑动到顶部 scrollTop={n} 设置竖向滚动条位置 scrollLeft={n} 设置横向滚动条位置原创 2020-09-25 16:18:00 · 11137 阅读 · 0 评论 -
taro 多端开发写法
方式一:采用内置变量判断 process.env.TARO_ENV方式二:文件命名法 xx.xxx.h5.js xx.xxx.weapp.js 会根据倒数第二个的名称,打包时打包对应文件原创 2020-09-25 09:58:13 · 240 阅读 · 1 评论 -
taro taro-ui配置
Taro3.0版本以上安装 cnpm install [email protected] 在app.jsx中引入 import 'taro-ui/dist/style/index.scss'若还报错 下载cnpm install @tarojs/plugin-sass --save原创 2020-09-24 16:50:28 · 826 阅读 · 0 评论 -
taro 动态设置标题栏、标题栏动画
导航栏文字旁显示加载菊花图 Taro.showNavigationBarLoading() Taro.hideNavigationBarLoading()设置标题栏文字 Taro.setNavigationBarTitle({title:'xx'})设置标题栏背景色 Taro.setNavigationBarColor({ backgroundColor:'16进制颜色', frontColor:'#ffffff / #000000' 前景颜色值,包括按钮、标题、状态栏的颜色原创 2020-09-24 15:12:05 · 3169 阅读 · 0 评论 -
taro 提示框Toast、Modal提示框、Loading加载动图和ActionSheet底部选项卡
Toast Taro.showToast({ title:'吐司', duration:2000, 持续时间 icon:'loading', 'success'、'loading'、'none' mask:false, 是否显示透明蒙层,防止触摸穿透 image:'图片路径/图片对象' 优先级高于icon,在icon的位置显示 }) Modal提示框 Taro.show原创 2020-09-24 14:57:46 · 9490 阅读 · 0 评论 -
taro 本地存储Storage
1、存储 同步 Taro.setStorageSync('key',存储数据) 异步 Taro.setStorage({ key:"xx", data:存储数据 }) 2、读取 同步 Taro.getStorageSync('key') 异步 Taro.getStorage({ key: 'key', success: function (res) { res.data } }) 3、删除 同步原创 2020-09-24 14:35:19 · 4320 阅读 · 0 评论 -
taro 传递消息机制Events
1、单页面消息 import Taro,{Events} from '@tarojs/taro' (1)使用前需要先示例化 let events=new Events(); (2)监听消息 events.on('监听名称',(arg)=>{...}) 监听单个消息,多个回调 events.on('监听名称',回调1) events.on('监听名称',回调2) events.on('监听名称',回调3) (3)发送消息 events.tri原创 2020-09-24 14:21:34 · 4629 阅读 · 0 评论 -
taro Button按钮组件
1、导入 import {Button} from '@tarojs/components'2、使用 <Button>按钮名称</Button>3、参数 size "default" , "mini" type "default" , "primary" , "warn" plain 是否为朴素按钮,背景色透明 disabled loading 名称前是否带加载菊花动画 formType "submit" , "reset",用于原创 2020-09-24 11:25:14 · 3565 阅读 · 0 评论 -
taro 插槽
插槽内容显示 this.props.children 无法进行react中插槽的this.props.children[0]等操作获取插槽的组件上的参数 <X xx='xx'>...</X> this.props.xx原创 2020-09-24 11:04:35 · 985 阅读 · 0 评论 -
taro css
内部px单位会被转换成rem若不要px转换,则改写成Px原创 2020-09-24 10:49:37 · 576 阅读 · 0 评论 -
taro 图片Image
1、导入 import {Image} from '@tarojs/components'2、使用 本地图片: import x from '图片路径' <Image src={x} /> 网络图片:src后接url即可3、参数 mode:图片样式 scaleToFill 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 aspectFit 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示原创 2020-09-24 10:46:14 · 5280 阅读 · 0 评论 -
taro 页面配置
1、配置全局页面样式 在app.config.js中配置,配置规则和小程序相似2、页面单独配置 在页面的xx.jsx文件创建相同名称的xx.config.js文件 export default{ navigationBarTitleText: '首页', ... }原创 2020-09-23 16:41:29 · 2553 阅读 · 0 评论 -
taro 路由配置、动态跳转
1、配置路由 在app.config.js的pages中设置页面路由 和小程序一样的规则2、动态跳转 import Taro from '@tarojs/taro' Taro.navigateTo({url:'/pages/配置的剩余路径'}原创 2020-09-23 16:39:26 · 6729 阅读 · 0 评论 -
taro 环境配置
1、安装 cnpm install -g @tarojs/cli2、创建模板 taro init xx3、启动命令 npm run dev:weapp 微信 npm run dev:rn react native npm run dev:h5 web4、web修改端口号和域名 config/index.js中,在对应的h5配置中添加 devServer:{port:8888,host:'localhost'},...原创 2020-09-22 10:26:53 · 2900 阅读 · 1 评论