开发背景

this person does not exist
这个网站起源于英伟达公司研究人员们打造的AI机器人——其能够生成随机且极为逼真的人脸图像，而实际上这些人脸并不存在于现实世界。
如下图所示是该网站生成的一个随机人脸图像。
在页面中的右下角有相关介绍
Imagined by a GAN (generative adversarial network) StyleGAN2 (Dec 2019) - Karras et al. and Nvidia
图片由生成式对抗网络（简称GAN）构建而成。
刚好最近在学习微信小程序的开发，于是想到结合这个网站，做一个随机人脸生成的小程序。

工具准备

微信开发者工具
微信开发者工具下载链接
注意选择稳定版及适合自己的平台
2. this person does not exist
该网站的网址，用于微信小程序获取图片

微信小程序开发过程

完成效果图
左侧就是微信小程序的运行界面，界面中的元素包括一张图，三行文本，两个按钮。相对来说比较简单。
小程序开发小知识

全局文件，分别是app.js app.json app.wxss，用于定义整个小程序的内容风格等
Pages目录文件（作用是用来放各个页面的）
index页面目录文件{包含4个文件}
（1）js：页面逻辑实现
（2）json: 负责标题栏和一些状态栏
（3）wxml: 管理页面有什么
（4）wxss: 页面排布
随机人脸生成小程序只有一个页面，结构比较简单，下面直接给出源代码
app.json

{"pages": ["pages/index/index"],"window": {"navigationBarBackgroundColor": "#ffffff","navigationBarTextStyle": "black","navigationBarTitleText": "随机人脸生成","backgroundColor": "#eeeeee","backgroundTextStyle": "light","enablePullDownRefresh": false},"sitemapLocation": "sitemap.json"
}

index.wxml

<!--pages/index/index.wxml-->
<view class="container"><image src='{{src}}' data-url="{{src}}" bindlongpress="saveImage" class="img"></image><text>{{text1}}</text><text>{{text2}}</text><view class="btncon"><button bindtap="showclick">显示</button><button bindtap="genclick">生成</button></view><text class="ver">by hs</text>
</view>

index.js

// pages/index/index.js
Page({/*** 页面的初始数据*/data: {text1:'welcome to The Matrix',text2: '请点击“生成”按钮',src:'/images/init1.jpg'},showclick:function(){console.log('flash clicked');this.setData({text2:'请稍等...',src: 'https://thispersondoesnotexist.com/image'});},genclick:function(){console.log('back clicked');this.setData({text2: '请点击“显示”按钮',src: '/images/init1.jpg'});},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},

/* pages/index/index.wxss */
.container{height: 90vh;display: flex;flex-direction: column;align-items: center;justify-content: space-around;
}
.btncon{display: flex;flex-direction: row;
}
.img{width: 500rpx;/*图片宽度*/
}
text{font-size: 50rpx;/*字体大小*/color: green;/* background-color: blue; */
}
.ver{font-size: 30rpx;/*字体大小*/color: black;
}

其余相关文件无需更改。
其中images文件夹主要存放了界面开始的那张数字矩阵的图，读者可随意更改为自己喜欢的图

我还没有发布，还在测试期，有兴趣的朋友可以加入测试哦

嘻嘻，谢谢观看
2020.12.15更新：
不好意思，由于账号没有维护，已经冻结，需要体验的朋友们等我解封冻结的账号再来吧~

2021.5.8更新：
帐号已经找回，需要体验的话，可以在小程序直接搜索：栎山村style

微信小程序入门-随机人脸生成相关推荐

Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
微信小程序入门-音乐播放器
萌新,随便做做,只是了解一下微信小程序,希望可以给看到的胖友一点参考. 之前在网上看到这个人入门四天做完一个,我五天做完了,比他好看,突然有一点自信然后发现自己特别不乐意重新看自己的代码,总觉得写的 ...
从零开始的微信小程序入门教程(一)
从零开始的微信小程序入门教程(一) 之前说要和同事一起开发个微信小程序项目,现在也在界面设计,功能定位等需求上开始实施了.所以在还未正式写项目前,打算在空闲时间学习下小程序.本意是在学习过程中结合实践 ...
A095_day01_微信小程序入门与组件
目录微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...
【微信小程序】微信小程序入门与实战-个人笔记
微信小程序入门与实战文章目录微信小程序入门与实战 1 初识微信小程序 1-1 2020版重录说明 1-2 下载小程序开发工具 1-3 新建小程序项目 1-4 小程序appid的注册 1-5 新版小 ...
做一个微信小程序给TA——程序猿小白的情人节礼物（微信小程序入门——一文学会小程序开发到发布小程序的全过程）
# 情人节可送给女朋友的礼物,或者作为两人的纪念 # 效果展示:微信搜索 "王美美与曾小帅" 小程序即可查看效果 # 微信小程序入门--使用免费后端云(Bmod)搭建留言板 ...
微信小程序入门与实战（七月）
微信小程序入门与实战(七月) 第1章初识微信小程序第2章小程序的基本目录结构与文件作用剖析 2-1 小程序页面的4种基本文件类型详解第3章 rpx响应式单位与flex布局 3-3 新建页面的技 ...
微信小程序开发 | 微信小程序入门
微信小程序入门 1.1 初识微信小程序 1.1.1 什么是微信小程序 1.1.2 微信小程序的账号 1.1.3 微信小程序的特点 1.1.4 微信小程序的发展前景 1.2 开发环境搭建 1.2.1 注 ...
微信小程序入门1--新建微信小程序页面
微信小程序入门1–新建微信小程序页面在新建微信小程序后会自动生成一个DEMO实例,我们可以在实例中修改自己所需的内容,当内容过多时,实例中的页面不足以满足我们的需求,因此需要新建微信小程序页面. 本 ...

微信小程序入门-随机人脸生成

微信小程序入门-随机人脸生成

开发背景

工具准备

微信小程序开发过程

微信小程序入门-随机人脸生成相关推荐

最新文章

热门文章