小程序源码如何改图片

Ⅰ 微信小程序源码怎么使用

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漏洞，可能会出现很多问题，需要调试，更改才能部署