Web开发编程网
分享Web开发相关技术

微信小程序开发笔记

最近在开发微信小程序,把自己在项目中经常遇到的知识点记录下来,以便下次开发的时候查看。
开发小程序开发工具推荐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默认是完成,所以设置同一只前四个是可以统一的。

作者:前端小喵
链接:https://juejin.im/post/6879605072762945543
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

未经允许不得转载:WEB开发编程网 » 微信小程序开发笔记
微信扫码关注微信公众号

相关推荐

  • 暂无文章

WEB开发编程网

谢谢支持,我们一直在努力

安全提示:您正在对WEB开发编程网进行赞赏操作,一但支付,不可返还。