温州荆谷乡八分钟带你入门微信小程序开发

，而 组件是用来写文本的，需要注意的是 组件内只支持 嵌套。
当然，可用用 插入图片，图片要保存到 image 目录，否则在测试的时候是无法上传的。
ID_info'
>{
{
lesson}
}
pic'
mode='
widthFix'
src='
../../image/GoZeroWaste.jpg'
>mode=‘widthFix’ 表示以宽度不变，高度自动变化，保持原图宽高比不变的方式进行缩放以适应屏幕大小。
接下来还需要修改 index.wxss 文件来设置样式：
/**index.wxss**/.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}
.ID_Badge {
padding-top: 20rpx;
color: blue;
}
.ID_info {
display: flex;
flex-direction: column;
align-items: center;
}
.pics {
width: 400rpx;
}
保存刷新，“个人中心” 页面就完成了。
生活指南原来的项目中 pages 目录下只有 index 和 logs 两个目录，因此我们还需要为第二个页面创建一个目录。
创建页面有两种方法：
在目录结构的 pages 图表上，新建目录，然后在目录下逐一创建页面构成文件在 app.json 下，直接添加建议采用第二种方法，修改 app.json 文件：
{
"pages":[ "pages/index/index", "pages/logs/logs", "pages/details/details" ]保存刷新之后就会发现，目录结构里自动创建了这一页。
对应的，也要修改 app.json 中的 tabBar 的链接（实际上我们已经做了）：
{
"pagePath": "pages/details/details", "iconPath": "image/icon_API.png", "selectedIconPath": "image/icon_API_HL.png", "text": "生活指南" }
然后修改 details.wxml 设置这一页的标题：
title'
> 21天零垃圾生活指南修改 details.wxss 设置样式：
/* pages/details/details.wxss */ .title {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 40rpx;
margin-bottom: 40rpx;
font-size: 40rpx;
}
这个页面是一个列表展示的页面，我们先在 details.js 文件中准备好数据：
// pages/details/details.jsPage({
/** * 页面的初始数据 */ data: {
showModalStatus: false, list: [ {
id: 0, name : "写一篇《垃圾日记》", introduce: "零垃圾并不是一项宏大的工程，而是由日常生活中一个个小小的习惯和选择组成的。
最难的，是迈出第一步。
", src: '
../../image/day01.jpg'
, showModalStatus: false, catalog: [ {
section: "1. xxx" }
, {
section: "2. xxx" }
, {
section: "3. xxx" }
, {
section: "4. xxx" }
, ] }
, {
id: 1, name: "带上自己的购物袋", introduce: "在我们家，当时垃圾桶里最多的就是塑料袋，而这些袋子跟着我回家后，都几乎难逃被丢进垃圾桶的命运。
", src: '
../../image/day02.jpg'
, showModalStatus: false, catalog: [ {
section: "1. xxx" }
, {
section: "2. xxx" }
, {
section: "3. xxx" }
, {
section: "4. xxx" }
, ] }
, /* 省略 */ ] }
接下来我们要使用列表渲染（wx:for）的方法将这些数据绑定一个数组，并在页面上重复渲染。
修改 details.wxml 文件：
aspectFit'
src="{
{
item.src}
}
">{
{
item.name}
}
{
{
item.introduce}
}
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。
修改 details.wxss 文件添加样式：
.lesson {
height: 190rpx;
padding-left: 20rpx;
}
.lessonPic {
position: absolute;
height: 150rpx;
width: 150rpx;
}
.lessonName {
position: absolute;
margin-left: 220rpx;
font-size: 35rpx;
}
.lessonIntroduce {
position: absolute;
margin-left: 220rpx;
margin-top: 60rpx;
margin-right: 20rpx;
color: rgb(185, 161, 161);
font-size: 28rpx;
}
好啦，第二个页面也完成了。
模拟弹窗接下来我们要在 “生活指南” 页面模拟一个弹窗的效果，正常的时候不显示，只有在点击的时候才出现，摁下面的 “确定” 就会消失。
完了实现这个功能，我们要在组件中绑定一个事件处理函数 bindtap，点击该组件的时候，小程序会在该页面对应的 Page 中找到相应的事件处理函数。
我们先在 details.js 中为每一列数据里引入一个 boolean 变量 showModalStatus 来描述对应的弹窗状态，并且初始值为 false，表示不显示。
同时外层也增加一个初始值为 false 的 showModalStatus 变量实现遮罩效果。
如下：
data: {
showModalStatus: false, list: [ {
id: 0, name : "写一篇《垃圾日记》", introduce: "零垃圾并不是一项宏大的工程，而是由日常生活中一个个小小的习惯和选择组成的。
最难的，是迈出第一步。
", src: '
../../image/day01.jpg'
, showModalStatus: false, catalog: [ {
section: "1. xxx" }
, {
section: "2. xxx" }
, {
section: "3. xxx" }
, {
section: "4. xxx" }
, ] }
然后在 details.wxml 中插入弹窗，并用条件渲染（wx:if）来判断是否渲染（显示）弹窗。
同时为每一个 item 添加 data-statu 来表示弹窗的状态。
如下：
powerDrawer'
data-statu='
open'
id="{
{
item.id}
}
"> aspectFit'
src="{
{
item.src}
}
">{
{
item.name}
}
{
{
item.introduce}
}
drawer_box'
wx:if='
{
{
item.showModalStatus}
}
'
id='
{
{
item.id}
}
'
> {
{
item.name}
}
drawer_content'
> title'
wx:for='
{
{
item.catalog}
}
'
wx:for-item='
catalog'
wx:key='
id'
> {
{
catalog.section}
}
btn_ok'
bindtap='
powerDrawer'
data-statu='
close'
id='
{
{
item.id}
}
'
>确定drawer_screen'
data-statu='
close'
wx:if='
{
{
showModalStatus}
}
'
>在 details.js 添加 powerDrawer 事件处理，包括显示和关闭事件：
powerDrawer: function (e) {
console.log("clicked");
var currentStatu = e.currentTarget.dataset.statu;
var index = e.currentTarget.id;
// 关闭 if (currentStatu == '
close'
) {
this.data.list[index].showModalStatus = false;
this.setData({
showModalStatus: false, list: this.data.list, }
);
}
// 显示 if (currentStatu == '
open'
) {
this.data.list[index].showModalStatus = true;
this.setData({
showModalStatus: true, list: this.data.list, }
);
}
}
,最后在 details.wxss 设置一下弹窗和遮罩层的样式：
.drawer_box {
width: 650rpx;
overflow: hidden;
position: fixed;
top: 50%;
z-index: 1001;
background: #FAFAFA;
margin: -150px 50rpx 0 50rpx;
}
.drawer_content {
border-top: 1.5px solid #E8E8EA;
height: 210px;
overflow-y: scroll;
/* 超出父盒子高度可滚动 */ }
.btn_ok {
padding: 10px;
font: 20px "microsoft yahei";
text-align: center;
border-top: 1.5px solid #E8E8EA;
color: #3CC51F;
}
.drawer_screen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background: black;
opacity: 0.5;
overflow: hidden;
}
OK，模拟弹窗也实现了。
预览图片最后一步就是在第一个页面实现图片预览和图片保存的功能，在 index.wxml 中为图片添加一个点击事件 previewImage。
pic'
mode='
widthFix'
src='
../../image/GoZeroWaste.jpg'
bindtap='
previewImage'
>在 index.js 中添加 imgalist 项（我们直接把公众号的二维码图片上传到 CSDN 的图片服务器了），并且实现 previewImage 事件处理。
如下：
Page({
data: {
motto: '
Hello World'
, company: "GoZeroWaste", lesson: "21天零垃圾生活指南", position: "垃圾魔法师", imgalist: ['
https://img-blog.csdnimg.cn/20190109104518898.jpg'
], userInfo: {
}
, hasUserInfo: false, canIUse: wx.canIUse('
button.open-type.getUserInfo'
) }
, previewImage: function (e) {
wx.previewImage({
current: this.data.imgalist, // 当前显示图片的http链接 urls: this.data.imgalist // 需要预览的图片http链接列表 }
) }
,大功告成，点击开发者工具中的 “预览”，使用微信扫描生成的二维码即可在手机端查看。
教程就到这里，希望大家可以对微信小程序有所了解。
本文转自：
https://luhuadong.blog.csdn.net/article/details/86181251推荐教程：
《微信小程序》以上就是八分钟带你入门微信小程序开发的详细内容，更多请关注php中文网其它相关文章！
微信
分享相关标签：
微信小程序开发本文转载于：
CSDN，如有侵犯，请联系a@php.cn删除
上一篇：
小程序new Date()方法失效怎么办
下一篇：
小程序页面间传递数据的方式相关文章相关视频小程序开发经验的总结微信小程序开发中var that =this的基本...微信小程序开发初次体验新手必备的微信小程序开发指南八分钟带你入门微信小程序开发微信小程序开发工具的安装认识小程序开发工具