微信小程序icon素材

『壹』 微信小程序使用iconfont及引入vant-icon使用iconfont

（此步驟時可以精簡文件，只復制保留iconfont.wxss文件到assets/iconfont文件下，其餘文件刪除，依然會正常顯示圖標）

准備工作到此已經完成，接下來進入項目配置使用；

可以使用view text等標簽引入iconfont；

頁面效果：

其中：

引入VantUI組件內容可參考 VantUI官網快速上手 進行配置；

頁面效果：

『貳』 微信小程序開發入門及案例詳解 素材

您好，
「微信小程序」開發之前必須要完成和注冊認證。如果是個人或者小公司想開發微信小程序，也可以找微信認證第三方開發商，比如贏在移動、正品科技等。
1、微信小程序注冊
在微信公眾平台官網首頁，按照提示點擊右上角的「立即注冊」按鈕，裡面總過有12步，按照要求提交就可以了。
2、小程序申請微信認證
政府、媒體、其他組織類型帳號，必須通過微信認證驗證主體身份。企業類型帳號，可以根據需要確定是否申請微信認證。已認證帳號可使用微信支付、微信卡券等高級許可權。
認證入口：登錄小程序—設置—基本設置—微信認證—詳情
3、小程序申請微信支付
已認證的小程序可申請微信支付。
4、小程序綁定微信開放平台帳號
小程序綁定微信開放平台帳號後，可與帳號下的其他移動應用、網站應用及公眾號打通，通過UnionID機制滿足在多個應用和公眾號之間統一用戶帳號的需求。
UnionID機制說明：如果開發者擁有多個移動應用、網站應用、和公眾帳號(包括小程序)，可通過UnionID來區分用戶的唯一性，因為只要是同一個微信開放平台帳號下的移動應用、網站應用和公眾帳號(包括小程序)，用戶的unionid是唯一的。換句話說，同一用戶，對同一個微信開放平台下的不同應用，UnionID是相同的。用戶的UnionID可通過調用「獲取用戶信息」介面獲取。
5、了解「獲取用戶信息」介面請查看開發文檔—API—開放介面—用戶信息。
綁定小程序流程說明：登錄微信開放平台、—管理中心—公眾帳號—綁定公眾帳號
注意：微信開放平台帳號必須完成開發者資質認證才可以綁定小程序。

『叄』 微信小程序 如何引入外部字體庫iconfont的

如何引入外部字體庫iconfont的圖標，具體如下

直接使用阿里巴巴的網路路徑

選擇iconfont圖標

官網：阿里巴巴矢量字體庫
步驟：阿里巴巴字體庫使用方法

『肆』 尋品小程序素材下載的方法

1.打開軟體,點擊:開始攔截;2.打開電腦端微信小程序頁面;3.你需要採集那個頁面的素材,就點擊小程序的那個頁面,軟體自動抓取;4.素材下載路徑地址軟體根目錄文件夾Resources微信小程序，小程序的一種，英文名Wechat Mini Program，是一種不需要下載安裝即可使用的應用，它實現了應用「觸手可及」的夢想，用戶掃一掃或搜一下即可打開應用。全面開放申請後，主體類型悶李為企業、政府、媒體、其他組織或個人的開發者，均可申請注冊小程序。微信小程序、微信訂閱號、微信服務號、微信企稿顫業號是並行的體系鍵罩敗。

『伍』 微信小程序icon 圖標 哪裡有

Iconfont-阿里巴巴矢量圖標庫

『陸』 微信小程序 本地背景圖片設置

1、背景圖片設置可以用服務賀李器上的圖片。

2、也可以將本地圖片轉成base64的。

wxml:

<view class="topview-left" style="background-image: url({{background}});mode='scaleToFill'"/>梁戚

js:

data: {

    background: "/style/images/icon_coupon_backgroud.png",

  },

/**

  * 生命周期函數--監聽頁面載入

  */

  onLoad: function(options) {

    //設置背景圖片

    let base64 = wx.getFileSystemManager().readFileSync(this.data.background, 'base64');

    this.setData({

      'background': 'data:image/png;base64,' + base64

    });

    //設置導航欄標題

    wx.setNavigationBarTitle({

      title: '下發優惠券'

    });

  },

wxss:

.topview-left {

  display: flex;

  flex-direction: column;

 橡拍陵 align-items: center;

  justify-content: center;

  width: 30%;

  height: 113px;

  background-repeat: no-repeat; /** 不重復*/

  background-size: 100% 100%;

  background-image: url('data:image/png;base64,base64碼'); /** 添加背景圖片的*/

}

3、也可以直接設置定位實現。

         <view style="display: flex; align-items: center;text-align:center;justify-content: center;margin-bottom:10px;">

               <image src="/pagesChronic/images/icon_case_background.png" style="height:26px;width:167px;position:absolute;"></image>

                <text style="position: relative;color:#FF9721;">評價</text>

           </view>

效果：

『柒』 8個好用到愛不釋手的微信小程序，每一款都精挑細選

微信上一些好用的小程序，有時候比app使用起來還令人歡喜。

這里就來分享8個好用到愛不釋手的微信小程序，每一款都是精挑細選，不知道有沒有你喜歡的呢？

比起app，我更喜歡用創客貼的小程序，全部的圖片設計、素材，這里都有，只要選中自己喜歡的圖片，就能生成。不管是海報、朋友圈圖片，還是文案配圖，都能在這里輕松製作。

快節奏的生活容易失眠，必備這個微信小程序，音樂、故事集以及隨機語錄等讓你快速入眠。個人覺得進入到小程序，台燈、頁面設計就讓人安靜下來，非常舒適，還有交流社區共享一份晚安。

有時候想要分享一個文案，但是直接分享鏈接很麻煩，想要截圖、長圖但是手機沒有這個功能，或者截取的不清晰，可以是使用這個小程序，長圖一鍵截取，高清且方便。

比較實用的一款微信小程序，功能很豐富，可以用來拍照識字，提取圖片上的文字，也能用來進行PDF文件的處理、編輯，以及還原表格的一些操作，還有更多功能，可以自己了解下。

同事給我安利的一個會議紀要神器，主要功能就是將語音轉換文字，不過實時或者之前錄制好的音頻都能轉換，總體使用下來，准確率還是非常高的，值得一試。

超好用的一款抽簽抓鬮工具，有時候需要隨機分組、抽簽就可以靠它來搞定，還有匿名投票、任務分配、抽獎安排等實用功能，也非常好用，有需要的可以看看。

不會過期的一個群相冊服務，用來整理圖片非常不錯，不僅可以用來整理，還能一鍵復制、備份，平時我就喜歡用這個來儲存照片，看起來方便，需要照片的時候一鍵導出即可。

經常覺得手機里的壁紙，或者微信聊天框的背景不是很好看，可以在這里找自己喜歡的。資源豐富，按照主題分類，能快速找到你喜歡的那款，還支持預覽保存功能，超贊。

這8款好用的小程序，款款精挑細選，不知道有沒有你正在用的呢？

專注干貨分享，喜歡的話記得關注我們哦。

『捌』 微信小程序 icon怎麼自定義圖標

首先，你的微信需要升級到最乎指新版本。在最上方的搜索框里搜索「小程序示例」，會看到這笑逗個頁面。 別猶豫，最上面的那個S形圖標，點進去。此時，你已經成功的把小歲升配程序接入了自己的微信中。在微信的「發現」欄里，最後一項應該已經是小程序了。

『玖』 微信小程序同步微信公眾號文章（二）

首先確認是否有相應的介面許可權，這里主要用到獲取素材相關的介面，可以看到對應介面文檔，個人號還是有對應許可權的。

在新增了永久素材後，開發者可以分類型獲取永久素材的列表：

1、獲取永久素材的列表，也包含租廳跡公眾號在公眾平台官網素材管理模塊中新建的圖文消息、語音、視伏芹頻等素材 。

2、臨時素材無法通過本介面獲取。

3、調用該介面需https協議。

實現的邏輯還是比較簡單的，具體分兩個步驟：

1、獲取公眾號的access_token

獲取公眾號的access_token的在前文中已經實現。

基於微信小程序雲函數的方式獲取微信公眾號access_token -

2、遍歷調用公眾號永久素材列表介面獲取數據

調用素材列表介面，獲取相應的文章信息，這里主要獲取公眾號的圖文信息(type為news)，介面調用請求說明：

http請求方式: POST

https://api.weixin.qq.com/cgi-bin/material/batchget_material?access_token=ACCESS_TOKEN

調取素材列表之後在小程序中通過視圖組件scroll-view來實現，主要有標題、封面圖、摘要：

<scroll-view class="container"scroll-y='true' style="height:{{height}}px" bindscrolltolower='lower'>

<block wx:for="{{res}}" >

<view class='feed-item' id='{{item.title}}' bindtap='getDetial'>

<view>

<text >{{item.title}}</text>

</view>

<view style='text-align: center'>

<image src='{{item.image_url}}'>tupian </image>

</view>

<view>

<text >{{item.digest}}</text>

</view>

</view>

</block>

</scroll-view>

文章列表在弊並頁面首次載入時就獲取：

/**

* 生命周期函數--監聽頁面載入

*/

onLoad: function (options) {

wx.getSystemInfo({

success: (res) => {

this.setData({

height: res.windowHeight

})

}

})

this.getData()

}

函數getData()實現步驟，具體請求函數用雲函數來實現，先從調取acces_token：

// 雲函數入口文件

const cloud = require('wx-server-sdk')

const news = require('New')

cloud.init()

// 雲函數入口函數

exports.main = async (event, context) => {

let token = null;

await cloud.callFunction({

name:'token'

}).then(function(data){

token = data.result;

});

let offset = event.offset;

let count = event.count;

let nw = new news(token);

let rst = nw.getWechatPosts(offset,count);

return rst;

}

然後調取文章列表信息，每次獲取10條信息：

//獲取文章列表

getData(){

var that = this;

let pgno = this.data.pageNo+1;

let result = this.data.res;

wx.cloud.callFunction({

name:'news',

data:{

offset:this.data.offset,

count:this.data.count

},

success:function(res){

var resArr = [];

let body = res.result.body;

let total_count = body.total_count;//總共圖文數量

let item_count = body.item_count;//本次調用數量

let item = body.item;

let page_total = parseInt((total_count + that.data.count - 1) / that.data.count);

let mud = total_count % that.data.count;

const db = wx.cloud.database();

for (let i = 0; i < item.length; i++) {

let news_item = item[i].content.news_item;

//單圖文消息及多圖文消息

for (let j = 0; j < news_item.length; j++) {

let title = news_item[j].title;//標題

let url = news_item[j].url;//詳細地址

let image_url = news_item[j].thumb_url;//封面圖片地址

let digest = news_item[j].digest;//摘要

let author = news_item[j].author;//作者

let content = news_item[j].content;

resArr.push(new nw(total_count, item_count, title, url, image_url, digest, author, content));

let res_id = null;

db.collection('content').where({

_id: url

}).get({

success: function (res) {

res_id = res.data[0]._id;

}

})

if (res_id === url){

}else{

db.collection('content').add({

data: {

_id: url,

content: content,

title: title

},

success: function (res) {

}

})

}

}

that.setData({

res: result.concat(resArr),

page_total: page_total,

pageNo: pgno,

mud: mud

});

}

}

})

}

scroll-view組件到底觸發事件實現函數：

lower() {

//總頁數18/10=1

var pageno = this.data.pageNo;

var page = this.data.page_total;

console.log("總頁數：" + page+",第"+pageno+"頁"+"zuohouy:"+this.data.mud)

if (pageno > page) {//page 4

wx.showToast({ //如果全部載入完成了也彈一個框

title: '我也是有底線的',

icon: 'success',

ration: 300

});

return false;

} else {

wx.showLoading({ //期間為了顯示效果可以添加一個過度的彈出框提示「載入中」

title: '載入中',

icon: 'loading',

});

let offset = this.data.offset;

let count = this.data.count;

offset = this.data.offset + this.data.count;

console.log("offset:" + offset+"count:"+count)

this.setData({

offset: offset,

count: count

});

setTimeout(() => {

this.getData();

wx.hideLoading();

}, 1500);

}

}