微信小程式開發教學欄位今天為大家介紹微信小程式的開發筆記,快快來看。
最近在開發微信小程序,把自己在專案中經常遇到的知識點記錄下來,以便下次開發的時候查看。
開發小程式開發工具推薦vscode寫程式碼,微信開發工具用於查看效果和調試。
#現在UI需求越來越高,高頻出現自訂標題欄的情況
"navigationStyle": "custom"复制代码
使用者授權是每個小程式都會用到的,可以根據自己的專案流程編寫自己的邏輯。 使用者授權
<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 { // 未授权 } }})复制代码
<input placeholder="请输入手机号码" placeholder-class="placeholderinput"></input>复制代码
.placeholderinput { color: #CCCCCF; font-size: 36rpx;}复制代码
#路由跳轉用到的比較多,每次跳轉的時候總是無法區分用哪一個方式進行跳轉,記下來,加深一下印象。
跳到tabBar 頁面,並關閉其他所有非tabBar 頁面
wx.switchTab({ url: '../../index/index'})复制代码
跳到應用程式內的某個頁面,但不允許跳到tabbar 頁面,並關閉目前頁面
wx.redirectTo({ url: '../../index/index'})复制代码
保留目前頁面,跳到應用程式內的某個頁面。但是不能跳到 tabbar 頁面。
wx.navigateTo({ url: '../../index/index'})复制代码
为什么详细讲解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」这两个
设置键盘右下角按钮的文字,type="text"时生效
為了實現安卓ios的統一confirm-type的設定也是很有必要,預設值是done,安卓預設是回車,ios預設是完成,所以設定同一隻前四個是可以統一的。
相關免費學習推薦:微信小程式開發教學
以上是微信小程式開發筆記,收藏! !的詳細內容。更多資訊請關注PHP中文網其他相關文章!