微信小程序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);

}

}