头像制作小程序源码（头像制作代码）
本文目录一览：
- 1、如何做一个小程序？
- 2、微信小程序头像怎么改
- 3、不懂代码怎么制作微信小程序
- 4、如何制作一个微信小程序
如何做一个小程序？
目前要做一个小程序，有以下三种方式：
1、自己开发，但前提是自己懂得编程技术，这个对自己的开发技能要求较高，不单单是前期的开发工作，还有后期的维护、更新以及测试，都需要大量的时间跟精力。
2、定制开发，但是这种开发方式价格较高，一般都是几万，十几万甚至更高，而且开发周期较长，几个月甚至更久；
3、最后就是通过第三方平台开发，这种开发方式价格较低，一般几千就可以实现，最重要的是开发时间短，一个星期左右就可以上线运营，所以可以根据自身情况选择开发。
微信小程序头像怎么改
主要步骤
获取用户头像
图片模板
图片合成
一、获取用户头像
制作自定义头像的第一步就是先选择图片。在【海豚趣图】的交互设计中，用户有三种选择图片的方式：微信头像、本地相册和相机拍摄。获取用户头像的产品设计如下图所示：
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="0ca8-6d5e-36ea-6e87 mask {{mask}}" bindtap="actionHide" view class="6d5e-36ea-6e87-f8e4 actionSheet animated {{animation}}"
slot/slot
button class="36ea-6e87-f8e4-d4d9 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-duration: 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)).reduce((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.选择模板首先，挑选一个你喜欢的模板，开始编辑。
2. 直接点击“添加新的商品”，就可以把自己的产品都上架了。如果商品较多，别忘了在【商店设置】里设置好商品分类。
3.风格设计装修 ，选择喜欢的主题颜色和导航栏，也可以自定义颜色。
4.添加或删除各种板块。一个小程序商城就是由各种板块组成的：轮播图、快捷按钮、滑动布局、优惠活动等等。
一个属于你自己的文章小程序就制作完成了。再点击左下角的立即发布，授权给你刚刚在微信公众平台注册的小程序账号，就一切搞定头像制作小程序源码！
就是这么简单~是不是没有任何难度？以上就是微信小程序怎么制作教程了。
如何制作一个微信小程序
如何制作一个微信小程序头像制作小程序源码？
1、先在微信公众平台注册认证公众号
2、然后复用公众号头像制作小程序源码的资质创建小程序
3、购买服务商的系统或者定制开发系统头像制作小程序源码，然后将系统和创建的小程序对接起来头像制作小程序源码，最后提交审核就可以啦
