使用taro开发微信小程序遇到的坑总结


Posted in Javascript onApril 08, 2019

Taro,京东凹凸实验室出品的适配多端的一个框架,Taro 是一套遵循 React 语法规范的 多端开发 解决方案。现如今市面上端的形态多种多样,Web、React-Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

一.taro开发搭建

1.taro很方便就在于其环境搭建很轻松,照着官方文档几行代码就能搭建好。

2.在进行预览的时候,不同的方式区别是很大的!!!,写的什么就要用什么进行预览,不然真的是天差地别。(我踩的最傻?诺目樱?/p>

二.关于标签

1.在taro上目前我所用的所有标签都要事先声明,比如View,Button,Image等.如下声明

import { View, Input, Button ,Image,Text} from "@tarojs/components";

2.各个标签在使用时首字母都是大写,不大写是不规范的

3.特别注意微信小程序只识别view和text等,相当于于h5中的div,p标签等等

三.关于函数的书写

1.遵从react语法,直接上例子

changeheading(e) {
  this.setState({
     heading: e.detail.value
       });
     }

四.关于taro本身自带标签

1.Picker:

用于写滑动选择,选择日期啥的,非常方便 ,示例是选择时间的组件

state = {  timeSel: '12:01', }

onTimeChange = e => {
  this.setState({
     timeSel:
      e.detail.value
     })
  }

<Picker mode='time' onChange={this.onTimeChange}> 
        <View className='arry'> 
             {this.state.timeSel} > 
        </View>
</Picker>

2.Opendata

在微信小程序中用于获取用户头像,昵称等信息,可以直接获取。

<OpenData className='avatar' type='userAvatarUrl'></OpenData>  //获取头像
<OpenData className='name' type='userNickName' lang='zh_CN'></OpenData>  // 获取昵称

3.其他的标签见taro官方文档。

五. 关于组件的引用

1.首先如何写一个组件

export default class 组件名 extends Component {
render(){
  return()
}

写时修改组件名,在引用时就可直接引用,例如

import 组件名 from '../../组件所在位置';

六.关于页面跳转

1.首先要在 app.js 的 page 里添加要管理的页面路径(即要跳转的页面路径)'pages/login/login',

2.然后在要跳转的页面写一个跳转方法就ok了

toPage() {
   Taro.navigateTo({
       url: '/pages/login/login', 
      }) 
   }

七.关于微信授权弹窗问题

wx.getUserInfo(OBJECT)此接口有调整,使用该接口将不再出现授权弹窗,请使用  引导用户主动进行授权操作,即该接口使用不在弹出授权窗口,只能使用button引导用户自己完成授权操作
那么现在就是通过wx.getSetting来判断用户是否授权,
如果授权直接获取相关信息跳转到相应页面
未授权的话就用button引导用户主动授权就OK了

八.taro上调用微信的方法

在微信中是wx.xxxxx,而在taro里可以直接用,只需要将前面的wx改成Taro。

即wx.getSettting变成Taro.getSetting。

总结

以上所述是小编给大家介绍的使用taro开发微信小程序遇到的坑总结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS批量修改PS中图层名称的方法
Jan 26 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
详解Vue中watch的高级用法
May 02 Javascript
深入了解js原型模式
May 30 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 Javascript
ES6学习教程之Promise用法详解
Nov 22 Javascript
微前端qiankun改造日渐庞大的项目教程
Jun 21 Javascript
vue+element+Java实现批量删除功能
Apr 08 #Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 #Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 #Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 #Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 #Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 #Javascript
面试题:react和vue的区别分析
Apr 08 #Javascript
You might like
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
javascript 尚未实现错误解决办法
2008/11/27 Javascript
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
淘宝搜索框效果实现分析
2011/03/05 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
python set内置函数的具体使用
2019/07/02 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
KTV的创业计划书范文
2014/02/02 职场文书
假期安全教育广播稿
2014/10/04 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
小学少先队工作总结2015
2015/05/26 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技