使用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 相关文章推荐
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
浅谈node.js中async异步编程
Oct 22 Javascript
超漂亮的jQuery图片轮播特效
Nov 24 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
May 03 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
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
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
对联广告js flash激活
2006/10/19 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
Vue组件选项props实例详解
2017/08/18 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
python创建关联数组(字典)的方法
2015/05/04 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
使用python画社交网络图实例代码
2019/07/10 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
python 实现逻辑回归
2020/12/30 Python
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
卫校毕业生个人自我鉴定
2014/04/28 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
《藏戏》教学反思
2016/02/23 职场文书
python+opencv实现目标跟踪过程
2022/06/21 Python