小程序源碼如何改圖片

Ⅰ 微信小程序源碼怎麼使用

1、打開瀏覽器，把免費免費小程序.網站復制到瀏覽器上面，打開後點擊免費製作。

Ⅱ QQ小程序圖標怎樣修改

只能在製作過程中進行設置，或者在有源碼二次開發時進行修改

Ⅲ 拿到微信小程序的源碼 需要修改哪些信息才能使用

1. 注冊小程序平台。

2. 認證之後，創建小程序，設定好名稱後會得到APPID和應用密匙。

3. 下載微信小程序開發者工具，創建項目，將APPID填入和項目名稱填入，選擇小程序源碼的目錄，點擊打開。

4. 打開後就能在開發者工具裡面看到小程序源碼的形態了，確定無誤後，點上傳到小程序後台。

5. 提交後，在小程序後台有一個開發版本，點擊它，提交審核，等待審核通過即可發布了。
   

Ⅳ 微信小程序頭像怎麼改

主要步驟

• 獲取用戶頭像

• 圖片模板

• 圖片合成

一、獲取用戶頭像

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

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，當用戶滾動的時候再發起下一次請求。

Ⅳ 小程序源碼怎麼導入 小程序源碼使用教程

1.登陸微信開發者工具，選擇小程序項目

如果你已經在開發別的項目，但又想導入小程序源碼的話，你可以在開發者工具點擊「項目 -- 新建項目」。

Ⅵ 已經下載了小程序模板和源代碼，如何替換成自己的圖片及內容

下載的小程序模板和代碼不能用的，因為小程序要不斷的更新升級，建議找一家專業的小程序開發服務商來做。
目前小程序開發公司主要分為兩種。
1、小程序在線模板製作平台
這類型的公司，可以自行DIY製作小程序，用戶只需打字傳圖、簡單拖拽，就可在短短幾分鍾內搭建一個好看好用的小程序。小程序的開發變成了一件非常簡單、無需基礎的事情。這類平台會給客戶一個賬號，自己能登錄，上傳些產品圖片。一般製作小程序之後，每年需要交一些伺服器維護管理費用。而且這些小程序都是使用的同一個後台，不能進行個性化定製開發、不能升級換代，出現BUG沒有專門的技術人員進行維護修正，且小程序數據不能遷移。
2、小程序定製開發服務商
這類公司主要是根據客戶需求，設計定製一個完整、獨一無二、有單獨後台、永久使用權的小程序，價格根據客戶的功能需求以及UI設計，後台管理等等，在2W-10W不等。這類型的公司利用已有的技術優勢，迅速接入小程序技術，為企業/個人提供小程序定製開發服務。
不同的小程序有不同的功能，因此出現了細分化的電商類小程序、點餐類小程序、酒店預定類小程序等等。專業的的小程序往往會帶來更好的用戶體驗，這就是開發公司存在的意義。

Ⅶ 小程序怎麼開發，小程序源碼安裝教程詳細解說

1. 獲取微信小程序的 AppID
首先登錄https://mp.weixin.qq.com ，就可以在網站的「設置」-「開發者設置」中，查看到微信小程序的 AppID 了，注意不可直接使用服務號或訂閱號的 AppID 。2. 創建項目
通過開發者工具，來完成小程序創建和代碼編輯。
開發者工具安裝完成後，打開並使用微信掃碼登錄。選擇創建「項目」，填入上文獲取到的 AppID ，設置一個本地項目的名稱（非小程序名稱），比如「我的第一個項目」，並選擇一個本地的文件夾作為代碼存儲的目錄，點擊「新建項目」就可以了。
為方便初學者了解微信小程序的基本代碼結構，在創建過程中，如果選擇的本地文件夾是個空文件夾，開發者工具會提示，是否需要創建一個 quick start 項目。選擇「是」，開發者工具會幫助我們在開發目錄里生成一個簡單的 demo。
項目創建成功後，點擊該項目，進入並看到完整的開發者工具界面，點擊左側導航，在「編輯」里可以查看和編輯我們的代碼，在「調試」里可以測試代碼並模擬小程序在微信客戶端效果，在「項目」里可以發送到手機里預覽實際效果。
3. 代碼編寫
點擊開發者工具左側導航的「編輯」，我們可以看到這個項目，已經初始化並包含了一些簡單的代碼文件。最關鍵也是必不可少的，是 app.js、app.json、app.wxss 這三個。其中，.js後綴的是腳本文件，.json後綴的文件是配置文件，.wxss後綴的是樣式表文件。微信小程序會讀取這些文件，並生成小程序實例。

Ⅷ 求助：小程序源碼導入後如何替換成自己內容

一般是替換標題、圖片還有訪問介面，如果有開發能力的話，還能改下樣式美化美化，在厲害的話，就可以自己多下載些源碼自己調試寫，源碼一般在小程序開發者論壇上類似的地方下就行，其實無非是多些多看多學，改的多了，就學會了，替換的就差不多了

Ⅸ 我想做一個小程序需要怎麼做

微信小程序的製作有自己開發和使用製作工具一鍵生成兩種方式。

1，製作工具一鍵生成小程序比較簡單，使用類似我們這種製作工具，進入網站後，選擇想要的模板，打字傳圖進行相應修改即可。

2，自己開發難度較大，需要一定的編程基礎，了解app.js、app.json、app.wxss等文件功能，搜集一些精美組件可讓小程序更有特色，編寫後台邏輯代碼等。編輯好後，准確分類，點擊提交，等待審核即可。

Ⅹ 買了小程序源碼如何使用

1. 買的小程序源碼，在沒有測試之前是不能馬上上線使用的

2. 這樣的程序很多bug漏洞，可能會出現很多問題，需要調試，更改才能部署