，而 組件是用來寫文本的，需要注意的是 組件內(nèi)只支持 嵌套。
當然，可用用 插入圖片，圖片要保存到 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 兩個目錄，因此我們還需要為第二個頁面創(chuàng)建一個目錄。
創(chuàng)建頁面有兩種方法：
在目錄結(jié)構(gòu)的 pages 圖表上，新建目錄，然后在目錄下逐一創(chuàng)建頁面構(gòu)成文件在 app.json 下，直接添加建議采用第二種方法，修改 app.json 文件：
{
"pages":[ "pages/index/index", "pages/logs/logs", "pages/details/details" ]保存刷新之后就會發(fā)現(xiàn)，目錄結(jié)構(gòu)里自動創(chuàng)建了這一頁。
對應的，也要修改 app.json 中的 tabBar 的鏈接（實際上我們已經(jīng)做了）：
{
"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 文件中準備好數(shù)據(jù)：
// pages/details/details.jsPage({
/** * 頁面的初始數(shù)據(jù) */ 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）的方法將這些數(shù)據(jù)綁定一個數(shù)組，并在頁面上重復渲染。
修改 details.wxml 文件：
aspectFit'
src="{
{
item.src}
}
">{
{
item.name}
}
{
{
item.introduce}
}
默認數(shù)組的當前項的下標變量名默認為 index，數(shù)組當前項的變量名默認為 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;
}
好啦，第二個頁面也完成了。
模擬彈窗接下來我們要在 “生活指南” 頁面模擬一個彈窗的效果，正常的時候不顯示，只有在點擊的時候才出現(xiàn)，摁下面的 “確定” 就會消失。
完了實現(xiàn)這個功能，我們要在組件中綁定一個事件處理函數(shù) bindtap，點擊該組件的時候，小程序會在該頁面對應的 Page 中找到相應的事件處理函數(shù)。
我們先在 details.js 中為每一列數(shù)據(jù)里引入一個 boolean 變量 showModalStatus 來描述對應的彈窗狀態(tài)，并且初始值為 false，表示不顯示。
同時外層也增加一個初始值為 false 的 showModalStatus 變量實現(xiàn)遮罩效果。
如下：
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 來表示彈窗的狀態(tài)。
如下：
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，模擬彈窗也實現(xiàn)了。
預覽圖片最后一步就是在第一個頁面實現(xiàn)圖片預覽和圖片保存的功能，在 index.wxml 中為圖片添加一個點擊事件 previewImage。
pic'
mode='
widthFix'
src='
../../image/GoZeroWaste.jpg'
bindtap='
previewImage'
>在 index.js 中添加 imgalist 項（我們直接把公眾號的二維碼圖片上傳到 CSDN 的圖片服務器了），并且實現(xiàn) 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鏈接列表 }
) }
,大功告成，點擊開發(fā)者工具中的 “預覽”，使用微信掃描生成的二維碼即可在手機端查看。
教程就到這里，希望大家可以對微信小程序有所了解。
本文轉(zhuǎn)自：
https://luhuadong.blog.csdn.net/article/details/86181251推薦教程：
《微信小程序》以上就是八分鐘帶你入門微信小程序開發(fā)的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！
微信
分享相關標簽：
微信小程序開發(fā)本文轉(zhuǎn)載于：
CSDN，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
小程序new Date()方法失效怎么辦
下一篇：
小程序頁面間傳遞數(shù)據(jù)的方式相關文章相關視頻小程序開發(fā)經(jīng)驗的總結(jié)微信小程序開發(fā)中var that =this的基本...微信小程序開發(fā)初次體驗新手必備的微信小程序開發(fā)指南八分鐘帶你入門微信小程序開發(fā)微信小程序開發(fā)工具的安裝認識小程序開發(fā)工具