使用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 相关文章推荐
基于Web标准的UI组件 — 树状菜单(2)
Sep 18 Javascript
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
JavaScript 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
JS打开新窗口的2种方式
Apr 18 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
Node.js的特点详解
Feb 03 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
详解ES6 扩展运算符的使用与注意事项
Nov 12 Javascript
使用Mock.js生成前端测试数据
Dec 13 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手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
分享别人写的一个小型js框架
2007/08/13 Javascript
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
JS简单实现数组去重的方法分析
2017/10/14 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
Python中关于Sequence切片的下标问题详解
2017/06/15 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
最新的大学生找工作自我评价
2013/09/29 职场文书
解除劳动合同协议书
2014/04/14 职场文书
大学共青团员个人自我评价
2014/04/16 职场文书
企业消防安全责任书
2014/07/23 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
小学教师自我评价
2015/03/04 职场文书
JavaScript实现简单计时器
2021/06/22 Javascript
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android