美文网首页前端小喵微信小程序
微信小程序开发笔记,你收藏了吗?

微信小程序开发笔记,你收藏了吗?

作者: 明眸yh | 来源:发表于2020-11-20 15:23 被阅读0次

    本人记性极差,所以经常总结工作中遇到的一些难题笔记,用来加深记忆,下次用到同样的问题可以直接拿来看,提高工作中的效率。
    此文章是工作中的笔记,描述可能不是那么清楚,有问题,大家可加我微信一起交流学习。
    最近在开发微信小程序,把自己在项目中经常遇到的知识点记录下来,以便下次开发的时候查看。
    开发小程序开发工具推荐vscode写代码,微信开发工具用于查看效果和调试。

    1、自定义标题栏

    现在UI要求越来越高,高频出现自定义标题栏的情况

    "navigationStyle": "custom"
    

    2、获取用户信息

    用户授权是每个小程序中都会用到的,可以根据自己的项目流程编写自己的逻辑。 用户授权

    <button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
    
    bindGetUserInfo (e) {
        console.log(e.detail.userInfo) // 获取到用户信息
    }
    

    已授权的情况下调用「wx.getUserInfo」「wx.getSetting」进行判断该用户是否授权

    wx.getSetting({
      success (res){
        if (res.authSetting['scope.userInfo']) {
          // 已经授权,可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function(res) {
              console.log(res.userInfo)
            }
          })
        } else {
            // 未授权
        }
      }
    })
    

    3、input 设置placeholder样式

    <input placeholder="请输入手机号码" placeholder-class="placeholderinput"></input>
    
    .placeholderinput {
      color: #CCCCCF;
      font-size: 36rpx;
    }
    

    4、路由

    路由跳转用到的比较多,每次跳转的时候总是不能区分用哪一个方式进行跳转,记下来,加深一下印象。
    跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

    wx.switchTab({
        url: '../../index/index'
    })
    

    跳转到应用内的某个页面,但是不允许跳转到 tabbar 页面,并关闭当前页面

    wx.redirectTo({
        url: '../../index/index'
    })
    

    保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。

    wx.navigateTo({
        url: '../../index/index'
    })
    

    5、设置input的「confirm-type」 的合法值

    设置键盘右下角按钮的文字,type="text"时生效

    • send 右下角按钮为“发送”
    • search 右下角按钮为“搜索”
    • next 右下角按钮为“下一个”
    • go 右下角按钮为“前往”
    • done 右下角按钮为“完成”
      为了实现安卓ios的统一confirm-type的设置也是很有必要,默认值是 done,安卓默认是回车,ios默认是完成,所以设置同一只前四个是可以统一的。

    相关文章

      网友评论

        本文标题:微信小程序开发笔记,你收藏了吗?

        本文链接:https://www.haomeiwen.com/subject/zpmdvktx.html