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

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

一.taro开发搭建

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

2.在进行预览的时候，不同的方式区别是很大的！！！，写的什么就要用什么进行预览，不然真的是天差地别。（我踩的最傻屌的坑）

二.关于标签

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开发微信小程序遇到的坑总结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 微信小程序排坑指南详解

    本文为大家分享了微信小程序排坑指南,供大家参考,具体内容如下 no.1 背景图不显示 微信小程序里面是允许用户自定义背景图的,但是限定了背景图的路径及地址,之前一直用相对路径来写,微信开发者工具中也显示出了背景图,误以为没有问题,但是预览的时候发现手机中不显示背景图,这就是今天介绍的第一个坑,背景图不允许为本地图片. 解决方法: 第一.用在线图片转base64码的方法,这种方法的优点在于图片不存储在本地或者服务器上,占用空间小修改方便,缺点是小图片处理效果更好,大图代码相当的长,长的都不想看他.

  • DataSet、DataTable、DataRow区别详解

    DataSet 表示数据在内存中的缓存. 属性 Tables  获取包含在 DataSet 中的表的集合. ds.Tables["sjxx"] DataTable 表示内存中数据的一个表. 公共属性 Columns 获取属于该表的列的集合. DataSet 获取此表所属的 DataSet. DefaultView 获取可能包括筛选视图或游标位置的表的自定义视图. PrimaryKey 获取或设置充当数据表主键的列的数组. Rows 获取属于该表的行的集合. TableName 获取或设

  • 获取DataRow[]的值示例

    首先,DataRow[] dr = dt.Select("t1='a'"); 得出的结果是一个数组,你只要循环这个数组就好了. 复制代码 代码如下: string x=""; if (dr.Length > 0) { foreach (DataRow drN in dr) { x+=drN["t2"]; //循环获得过滤条件后 t2列的值 } } 注意要是明确第几行的值也可以这样获得:如想获得过滤后 第一条值,可以通过下面一句获得 stri

  • Taro集成Redux快速上手的方法示例

    前言的前言 最近被一款来自京东凹凸实验室的多终端开发框架Taro吸粉了,官方对 Taro 的简介是使用React语法,一键生成多终端应用(包括小程序 / H5 / 快应用 / RN 等),而目前 Github 的 Star 也达到了非常可观的数量:4k+.对此,笔者也尝了把鲜,体验了下如何使用Taro写微信小程序.感觉还是十分灵活易用(一气呵成,都没遇到bug!),并且 Taro 还集成了 Redux,解决了小程序没有数据流框架的痛点. 这里贴一个 Taro 的官方文档,有兴趣的同行们可以了解下

  • 将DataRow转成指定类型的类,并返回这个类的对象(带值)

    /// <summary>         /// 将DataRow转换成指定类型         /// </summary>         /// <param name="pDataRow"></param>         /// <param name="pType">实体类</param>         /// <returns></returns>   

  • 详解微信小程序 wx.uploadFile 的编码坑

    详解微信小程序 wx.uploadFile 的编码坑

    编写微信小程序时,用到 wx.uploadFile,用来上传图片+文本信息．然而在编写过程中,由于官方的 demo 和文档描述很少,在几个坑上耗费了不少时间． 这里分享一个和编码有关的坑,主要是由于真机预览时 formData 中的非字母.数字的 ASCII 编码的字符如中文.泰文传输到服务端将不会自动进行转码码,并会会产生乱码及溢出,从而导致错误. 微信的 uploadFile 类似与 html 中的form带文件上传的表单 ( enctype="multipart/form-data&quo

  • 微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb

    微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb

    发现问题 重新启动微信小程序编辑器的时候遇到了这样的一个问题: tabBar.list[3].selectedIconPath 大小超过 40kb 微信小程序开发的过程之中总会出现这样或者那样的错误,需要我们耐心的去寻找,仔细查看和百度查询之后,发现了原因:其中有一张图片,替换的时候没有注意图片大小,导致项目无法预览. 解决方法 参考了一下微信小程序的官方API,查看tabBar list定义说明:也就是说选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,而我新

  • 微信小程序网络请求的封装与填坑之路

    微信小程序网络请求的封装与填坑之路

    以前写过一篇关于微信小程序上拉加载,上拉刷新的文章,今天写的是关于小程序网络请求的封装. 在这里首先声明一个小程序文档的bug,导致大伙们在请求的时候,服务器收到不到参数的问题 示例代码: wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'Content-Type': 'application/json' }, success: function(res) { console.lo

  • 微信小程序使用npm支持踩坑

    前言 最近写了个CNode 社区的微信小程序版本,把在微信小程序中使用npm包,踩的坑记录一下,希望能给遇到类似问题的小伙伴,提供一些思路和方向. npm 支持 从小程序基础库版本 2.2.1 或以上.及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装第三方包. 踩坑之路 由于项目中需要格式化一些日期数据,于是选择了moment,一款JavaScript 日期处理类库 首先使用命令行,安装moment # 打开小程序根目录 cd src npm install --

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

    Taro,京东凹凸实验室出品的适配多端的一个框架,Taro 是一套遵循 React 语法规范的 多端开发 解决方案.现如今市面上端的形态多种多样,Web.React-Native.微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要. 一.taro开发搭建 1.taro很方便就在于其环境搭建很轻松,照着官方文档几行代码就能搭建好. 2.在进行预览的时候,不同的方式区别是很大的

  • taro开发微信小程序的实践

    在京东凹凸实验室开发Taro跨平台早期之前,就已经进行Taro尝鲜了.开发这个实例 猫眼电影 已经过去几个月了.案例部分使用的是猫眼电影真实线上接口,关于订座的座位数据是自己模拟实现的,案例只供参考学习. 开发环境 操作系统:Window 10 Taro版本:v0.0.69 Node版本:v8.11.1 github地址: https://github.com/Harhao/miniProgram 运行效果 目录分析 src 是主要的开发目录,各个文件实现功能如下所示: ├─.idea │ └─

  • 详解Linux 下开发微信小程序安装开发工具

    详解Linux 下开发微信小程序安装开发工具 1. git clone https://github.com/yuan1994/wechat_web_devtools 然后创建一个文件夹 mkdir /opt/tencent/ 移动文件 mv ./wechat_web_devtools /opt/tencent 修改用户组 chown -R root:root /opt/tencent/wechat_web_devtools 启动测试工具 /opt/tencent/wechat_web_devt

  • 使用TypeScript开发微信小程序的方法

    使用TypeScript开发微信小程序的方法

    TypeScript简介: TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构师,已工作于TypeScript的开发. TypeScript扩展了JavaScript的语法,所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作.TypeScript是为大型应用之开发而设计,而编译时它产生 JavaScript 以确保兼容性.

  • 使用Vue.js开发微信小程序开源框架mpvue解析

    前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为H5,mpvue将是十分契合的一种解决方案. 目前,mpvue已经在美团点评多个实际业务项目中得到了验证,因此我们决定将其开源,希望更多技术同行一起开发,应用到更广泛的场景里去.github项目地址请参见mpvue .使用文档请参见 http://mpvue.com/. 为了帮

  • 解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题

    前言 最近博主正在用微信小程序开发一款网上商城系统.恰好赶上了美团开源的小程序开发框架mpvue.该框架继承了vue.js的特性,用起来还是蛮爽的.然后在开发中,数据仓库这块懵逼了, 引入的vuex的辅助函数mapState.mapGetters.mapMutations.mapActions等怎么就不能用呢.苦恼之际打开D盘,一番愉悦之后,终于想通啦- 问题分析 •vuex辅助函数 首先简单说一下vuex的辅助函数mapState.mapGetters.mapMutations.mapActi

  • 基于vue开发微信小程序mpvue-docs跳转页面功能

    打开github,把项目克隆下来https://github.com/F-loat/mpvue-quickstart 跳转页面,废话不多说直接点... 打开pages.js 默认是有两个页面的, 现在新添加一个newpage的页面 这样加就行了! 然后是 用模版上的方法去跳转页面已测试OK, 虽然是很简单的问题,但是没找到在哪写的,所以给记录下来!希望对你有用 总结 以上所述是小编给大家介绍的基于vue开发微信小程序mpvue-docs跳转页面功能,希望对大家有所帮助,如果大家有任何疑问请给我留

  • 在webstorm开发微信小程序之使用阿里自定义字体图标的方法

    1.下载阿里图标,解压出来之后有个.css文件 然后复制这css里面的所有代码 2.新建一个wxss文件,例如我新建的就是iconfont.wxss,然后把刚才复制的所有代码,复制到这个文件里面去. 3.在需要使用到图标的页面导入该wxss文件.例如: 这样在该wxml页面就可以使用图标了 总结 以上所述是小编给大家介绍的在webstorm开发微信小程序之使用阿里自定义字体图标 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!

  • 使用uni-app开发微信小程序的实现

    前言 9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目,以及自己对框架的补充,包括封装request接口,引用color-ui,动态设置底部tab页等,详情见下文 uni-app 介绍(官网) uni-app是一个使用Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.H5.以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台. 即使不

  • 使用Typescript开发微信小程序的步骤详解

    使用Typescript开发微信小程序的步骤详解

    Typescript的优势咱不需要赘述太多,有兴趣可以参考(https://www.typescriptlang.org/).今天给大家分享一下如何在微信小程序(或者其他同类小程序)开发中使用Typescript. 这个分两种情况,最简单的做法就是在创建项目时,选择Typescript这个选项,如下图所示.但要注意,这个选项只有在选择"Use no cloud service"才有,而另外一种Mini Program Cloud Base则不支持.这个可能是开发工具还没有跟上吧,希望以

随机推荐