微信小程式開發筆記,收藏! !

coldplay.xixi
發布: 2020-10-09 16:23:01
轉載
2877 人瀏覽過

微信小程式開發教學欄位今天為大家介紹微信小程式的開發筆記,快快來看。

微信小程式開發筆記,收藏! !

最近在開發微信小程序,把自己在專案中經常遇到的知識點記錄下來,以便下次開發的時候查看。
開發小程式開發工具推薦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[&#39;scope.userInfo&#39;]) {      // 已经授权,可以直接调用 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: &#39;../../index/index&#39;})复制代码
登入後複製

跳到應用程式內的某個頁面,但不允許跳到tabbar 頁面,並關閉目前頁面

wx.redirectTo({    url: &#39;../../index/index&#39;})复制代码
登入後複製

保留目前頁面,跳到應用程式內的某個頁面。但是不能跳到 tabbar 頁面。

wx.navigateTo({    url: &#39;../../index/index&#39;})复制代码
登入後複製

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.im
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!