微信小程序开发笔记,
微信小程序开发教程栏目今天为大家介绍微信小程序的开发笔记,快快来看。
最近在开发微信小程序,把自己在项目中经常遇到的知识点记录下来,以便下次开发的时候查看。
开发小程序开发工具推荐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="https://www.swvq.com/images/pic.jpg" 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默认是完成,所以设置同一只前四个是可以统一的。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tangbhhia
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01