小程序頭像怎麼改,需要詳細流程

第一步,登陸微信小程序後台
第二步,點擊左側設置
第三步,找到微信小程序頭像點擊修改
第四步,選擇圖片上傳
第五步,調整圖片提交保存

Ⅱ 微信小程序 怎麼設置小程序的頭像

小程序登錄,左側底部菜單——設置,如下圖:「修改」

Ⅲ 百度小程序頭像怎麼修改

進入「平台首頁-設置-基礎設置-小程序頭像-修改」。

Ⅳ 我的小程序點進去看頭像是改了的,但是外面看小程序頭像依然沒變,小程序碼是以前的,這個怎麼弄啊

刪除重新進入即可,手機微信有緩存,另外,微信小商店功能局限,可以使用牛小店微商城拓展更多功能

Ⅳ 小程序支持修改頭像嘛

小程序頭像修改需登陸小程序後台,點擊設置

Ⅵ 微信小程序頭像怎麼改

主要步驟

  • 獲取用戶頭像

  • 圖片模板

  • 圖片合成

  • 一、獲取用戶頭像

    製作自定義頭像的第一步就是先選擇圖片。在【海豚趣圖】的交互設計中,用戶有三種選擇圖片的方式:微信頭像、本地相冊和相機拍攝。獲取用戶頭像的產品設計如下圖所示:

    1、由於微信官方不再支持通過 wx.getUserInfo 介面來獲取用戶信息,我們必須通過使用button組件並將open-type指定為getUserInfo類型來獲取或展示用戶信息。

  • 優化用戶體驗,使用 wx.getUserInfo 介面直接彈出授權框的開發方式將逐步不再支持。從2018年4月30日開始,小程序與小游戲的體驗版、開發版調用 wx.getUserInfo 介面,將無法彈出授權詢問框,默認調用失敗。正式版暫不受影響。
  • 上圖中彈出底部菜單的交互方式無法通過wx.showActionSheet來實現(因為該介面只能指定字元串文本,不能使用button,navigator等組件)。

    因此,只能通過自定義actionSheet組件來實現以上功能。

    mmp-action-sheet 組件

    以下是 mmp-action-sheet 組件的代碼

    index.wxml

  • <view hidden="{{!actionShow}}" class="mask {{mask}}" bindtap="actionHide"> <view class="actionSheet animated {{animation}}">

  • <slot></slot>

  • <button class="close" bindtap="actionHide">{{closeText}}</button>

  • </view></view>

  • 2、通過slot在 action-sheet 中插入自定義的內容,比如button、navigator等。

    index.wxss

  • .mask{ position: fixed; top: 0; left: 0; width:100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 999;

  • }.actionSheet{ width: 100%; position: absolute; top: 100%; z-index: 1000; overflow: hidden;

  • }.actionSheet button,.actionSheet navigator{ color: #000; text-align: center; background: #fff; border-radius: 0; line-height: 3.5; font-size: 32rpx; border-bottom: 1rpx solid rgb(236, 236, 236); opacity: 1;

  • }.actionSheet button:active,.actionSheet navigator:active{ color:#000; background: rgb(236, 236, 236);

  • }.actionSheet button::after,.actionSheet navigator::after{ border: none; border-radius: 0;

  • }.actionSheet .close{ border-bottom: none; border-bottom: 50rpx solid #fff; border-top: 16rpx solid rgb(236, 236, 236);

  • }.animated { animation-timing-function: ease-out; animation-ration: 0.2s; animation-fill-mode: both;

  • }@keyframes fadeInBottom {from{ transform: translate3d(0, 0, 0);

  • } to { transform: translate3d(0, -100%, 0);

  • }

  • }.fadeInBottom { animation-name: fadeInBottom;

  • }@keyframes fadeOutBottom {from{ transform: translate3d(0, -100%, 0);

  • } to { transform: translate3d(0, 0, 0);

  • }

  • }.fadeOutBottom { animation-name: fadeOutBottom;

  • }@keyframes fadeIn {from{ opacity: 0;

  • } to { opacity: 1;

  • }

  • }.fadeIn { animation-name: fadeIn;

  • }@keyframes fadeOut {from{ opacity: 1;

  • } to { opacity: 0;

  • }

  • }.fadeOut { animation-name: fadeOut;

  • }

  • index.js

  • Component({ properties: { actionSheetStatus: { type: Boolean, value: false,

  • observer(newVal) {

  • if (newVal) {

  • this.setData({ actionSheetStatus: true, animationMask: 'fadeIn', animationSheet: 'fadeInBottom'

  • })

  • } else { this.setData({ actionSheetStatus: false, animationMask: 'fadeOut', animationSheet: 'fadeOutBottom'

  • })

  • }

  • }

  • }, closeText: { type: String, value: '取消'

  • }

  • }, data: { animationMask: 'fadeIn', animationSheet: 'fadeInBottom'

  • }, methods: {

  • closeActionSheet() {

  • this.setData({ animationMask: 'fadeOut', animationSheet: 'fadeOutBottom'

  • })

  • setTimeout(() => {

  • this.setData({actionSheetStatus: false})

  • }, 300)

  • }

  • }

  • })

  • 組件只有兩個參數:

  • actionSheetStatus指定組件的初始展示狀態,默認為false,表示不顯示組件。

  • closeText指定關閉按鈕的名字,默認為取消。

  • index.json

  • { "component": true, "usingComponents": {}

  • }

  • 接下來在頁面中調用組件,在組件中插入了3個button組件來實現來獲取用戶頭像:

  • <action-sheet actionSheetStatus="{{actionSheetStatus}}">

  • <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">使用微信頭像</button>

  • <button bindtap="pickPic" data-source-type="album">使用本地相冊</button>

  • <button bindtap="pickPic" data-source-type="camera">拍照</button>

  • </action-sheet>

  • 以上我們通過自定義組件mmp-action-sheet就解決了原生的 actionsheet 無法指定button,從而無法獲取用戶微信頭像的問題。

    該組件我已經發布到npm包,需要用到的同學可以通過npm安裝,也可以在github上查看源碼和使用文檔。

    二、圖片模板

    有了原圖,接下來我們需要選擇圖片模板。如果模板數量不多或者模板變化不頻繁,我們可以直接把模板放在本地。鑒於我提供的模板比較多,放在本地會增大小程序源碼的大小,我把模板上傳到了小程序的雲存儲中,通過雲函數來動態獲取圖片模板,方便以後模板擴展。

    雲函數tpl的代碼如下:

  • // 雲函數入口文件const cloud = require('wx-server-sdk')


  • cloud.init()// 雲函數入口函數exports.main = async (event, context) => { const wxContext = cloud.getWXContext() // 1. 獲取資料庫引用

  • const db = cloud.database() const MAX_LIMIT = 100

  • // 2. 構造查詢語句

  • const countResult = await db.collection('template').count() const total = countResult.total // 計算需分幾次取

  • const batchTimes = Math.ceil(total / 100) const tasks = [] for (let i = 0; i < batchTimes; i++) { const promise = db.collection('template').skip(i * MAX_LIMIT).limit(MAX_LIMIT).get()

  • tasks.push(promise)

  • } return (await Promise.all(tasks)).rece((acc, cur) => { return {

  • data: acc.data.concat(cur.data),

  • errMsg: acc.errMsg,

  • }

  • })

  • }

  • 頁面中調用雲函數拉取模板:

  • getTpl() { const self = this

  • // 調用雲函數獲取圖片模板

  • wx.cloud.callFunction({

  • name: 'tpl'

  • }).then(res => {

  • self.setData({

  • templates: res.result.data

  • })

  • })

  • }

  • 三、問題

    到這里模板的獲取邏輯已經沒有問題了,但在開發過程中遇到了一個問題。模板圖片的鏈接我使用的是雲文件ID,當有大量圖片並行載入的時候,只有部分圖片能夠顯示,我看了一下dom節點其實都已經存在了,image的src的地址也都是正確的。

  • 1、微信官方自2.3.0開始已經支持在image中使用雲文件ID。雲文件ID的格式為:cloud://xxx.xxx/templates/01.png。
  • 我猜測可能是對微信雲存儲並發請求過多導致的(有知道的同學可以告知),因為我試了一下將雲文件ID換成正常的HTTPS的鏈接是沒問題的。

    由此可知,可以想到有三種可行的解決方案:

  • 2、將圖片模板存儲到外部OSS,使用https協議的鏈接。

  • 3、使用wx.getTempFileURL用雲文件 ID 換取真實鏈接,也就是https形式的鏈接。

  • 4、控制圖的並行載入數量。我的實踐是將並行載入數量控制在20,當用戶滾動的時候再發起下一次請求。

Ⅶ 怎樣把微信小程序的頭像換了

您的問題我已看到,那麼,如何把微信小程序的頭像換了?下面由小編來為您解答。

答:一、首先登錄微信,點擊進入微信小程序。在微信小程序的界面上,在搜索欄里輸入「製作器」。

以上步驟僅供您參考,還望您能點贊,謝謝!

Ⅷ 如何改這個小程序的頭像和名字。😞

前提(自己開發小程序中)
改名字app.json-->"navigationBarTitleText":"名字"
改頭像,小程序應該是自動獲取用戶的頭像,在index.js里有對應的函數可以自動獲取你的頭像
如果要改可以換成死的把下面image部分插入你想換的圖片就行
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
--><image src=""/>

Ⅸ 百度小程序頭像可以修改嗎

可以修改,一個月可以申請修改5次。

Ⅹ 在微信小程序每日交作業中學生如何更換頭像

微信小程序每日交作業中,你要更換自己自己的頭像,只要點擊自自己右下角的我就可以。