• 技术文章 >微信小程序 >小程序开发

    微信小程序开发笔记,收藏!!

    coldplay.xixicoldplay.xixi2020-10-09 16:23:01转载312

    微信小程序开发教程栏目今天为大家介绍微信小程序的开发笔记,快快来看。

    最近在开发微信小程序,把自己在项目中经常遇到的知识点记录下来,以便下次开发的时候查看。
    开发小程序开发工具推荐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、image组件常用mode合法值梳理

    为什么详细讲解image,每次后台上传的图片和我们前端界面的尺寸不一样,我们前端就要进行处理了,还有就是测试老是回提出一些图片变形上的问题,为了不让他们提出这些问题,我们详细分析一下,如果有不正确欢迎交流指正。 在固定宽高的情况下:

     <image src="/images/pic.jpg" class="pic" mode="aspectFill"></image>复制代码
    .pic {  width: 600rpx;  height: 500rpx;  border: 1rpx solid #ccc;}复制代码

    设置以下属性图片会发生什么变化

    • scaleToFill 图片的宽高完全拉伸至填满 image 元素,会改变图片的宽高比,图片变形

    • aspectFit 图片完整的展示出来,图片的宽高比不变。

    • aspectFill 图片的宽高比不变,为完整的展示,会发生裁切

    常用的「aspectFit」 「aspectFill」这两个

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

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

    • send 右下角按钮为“发送”
    • search 右下角按钮为“搜索”
    • next 右下角按钮为“下一个”
    • go 右下角按钮为“前往”
    • done 右下角按钮为“完成”

    为了实现安卓ios的统一confirm-type的设置也是很有必要,默认值是 done,安卓默认是回车,ios默认是完成,所以设置同一只前四个是可以统一的。

    相关免费学习推荐:微信小程序开发教程

    以上就是微信小程序开发笔记,收藏!!的详细内容,更多请关注php中文网其它相关文章!

    本文转载于:juejin,如有侵犯,请联系a@php.cn删除
    专题推荐:微信小程序
    上一篇:了解小程序无痕埋点 下一篇:强烈推荐的几个简单又实用微信小程序开发小技巧
    第13期线上培训班

    相关文章推荐

    • 在微信小程序中实现virtual-list的方法详解• 详解Medusa 微信小程序工程化实践方案• 实战篇---微信小程序工程化探索之webpack• 开发微信小程序,我为什么只使用 upData

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网