taro微信小程序采坑总结

一.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官方文档。

五. 关于组件的引用

首先如何写一个组件

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。
  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值