，而 組件是用來寫文本的，需要注意的是 組件內(nèi)只支持 嵌套。
當(dāng)然，可用用 插入圖片，圖片要保存到 image 目錄，否則在測(cè)試的時(shí)候是無法上傳的。
ID_info'
>{
{
lesson}
}
pic'
mode='
widthFix'
src='
../../image/GoZeroWaste.jpg'
>mode=‘widthFix’ 表示以寬度不變，高度自動(dòng)變化，保持原圖寬高比不變的方式進(jìn)行縮放以適應(yīng)屏幕大小。
接下來還需要修改 index.wxss 文件來設(shè)置樣式：
/**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;
}
保存刷新，“個(gè)人中心” 頁(yè)面就完成了。
生活指南原來的項(xiàng)目中 pages 目錄下只有 index 和 logs 兩個(gè)目錄，因此我們還需要為第二個(gè)頁(yè)面創(chuàng)建一個(gè)目錄。
創(chuàng)建頁(yè)面有兩種方法：
在目錄結(jié)構(gòu)的 pages 圖表上，新建目錄，然后在目錄下逐一創(chuàng)建頁(yè)面構(gòu)成文件在 app.json 下，直接添加建議采用第二種方法，修改 app.json 文件：
{
"pages":[ "pages/index/index", "pages/logs/logs", "pages/details/details" ]保存刷新之后就會(huì)發(fā)現(xiàn)，目錄結(jié)構(gòu)里自動(dòng)創(chuàng)建了這一頁(yè)。
對(duì)應(yīng)的，也要修改 app.json 中的 tabBar 的鏈接（實(shí)際上我們已經(jīng)做了）：
{
"pagePath": "pages/details/details", "iconPath": "image/icon_API.png", "selectedIconPath": "image/icon_API_HL.png", "text": "生活指南" }
然后修改 details.wxml 設(shè)置這一頁(yè)的標(biāo)題：
title'
> 21天零垃圾生活指南修改 details.wxss 設(shè)置樣式：
/* pages/details/details.wxss */ .title {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 40rpx;
margin-bottom: 40rpx;
font-size: 40rpx;
}
這個(gè)頁(yè)面是一個(gè)列表展示的頁(yè)面，我們先在 details.js 文件中準(zhǔn)備好數(shù)據(jù)：
// pages/details/details.jsPage({
/** * 頁(yè)面的初始數(shù)據(jù) */ data: {
showModalStatus: false, list: [ {
id: 0, name : "寫一篇《垃圾日記》", introduce: "零垃圾并不是一項(xiàng)宏大的工程，而是由日常生活中一個(gè)個(gè)小小的習(xí)慣和選擇組成的。
最難的，是邁出第一步。
", src: '
../../image/day01.jpg'
, showModalStatus: false, catalog: [ {
section: "1. xxx" }
, {
section: "2. xxx" }
, {
section: "3. xxx" }
, {
section: "4. xxx" }
, ] }
, {
id: 1, name: "帶上自己的購(gòu)物袋", introduce: "在我們家，當(dāng)時(shí)垃圾桶里最多的就是塑料袋，而這些袋子跟著我回家后，都幾乎難逃被丟進(jìn)垃圾桶的命運(yùn)。
", src: '
../../image/day02.jpg'
, showModalStatus: false, catalog: [ {
section: "1. xxx" }
, {
section: "2. xxx" }
, {
section: "3. xxx" }
, {
section: "4. xxx" }
, ] }
, /* 省略 */ ] }
接下來我們要使用列表渲染（wx:for）的方法將這些數(shù)據(jù)綁定一個(gè)數(shù)組，并在頁(yè)面上重復(fù)渲染。
修改 details.wxml 文件：
aspectFit'
src="{
{
item.src}
}
">{
{
item.name}
}
{
{
item.introduce}
}
默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為 index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為 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;
}
好啦，第二個(gè)頁(yè)面也完成了。
模擬彈窗接下來我們要在 “生活指南” 頁(yè)面模擬一個(gè)彈窗的效果，正常的時(shí)候不顯示，只有在點(diǎn)擊的時(shí)候才出現(xiàn)，摁下面的 “確定” 就會(huì)消失。
完了實(shí)現(xiàn)這個(gè)功能，我們要在組件中綁定一個(gè)事件處理函數(shù) bindtap，點(diǎn)擊該組件的時(shí)候，小程序會(huì)在該頁(yè)面對(duì)應(yīng)的 Page 中找到相應(yīng)的事件處理函數(shù)。
我們先在 details.js 中為每一列數(shù)據(jù)里引入一個(gè) boolean 變量 showModalStatus 來描述對(duì)應(yīng)的彈窗狀態(tài)，并且初始值為 false，表示不顯示。
同時(shí)外層也增加一個(gè)初始值為 false 的 showModalStatus 變量實(shí)現(xiàn)遮罩效果。
如下：
data: {
showModalStatus: false, list: [ {
id: 0, name : "寫一篇《垃圾日記》", introduce: "零垃圾并不是一項(xiàng)宏大的工程，而是由日常生活中一個(gè)個(gè)小小的習(xí)慣和選擇組成的。
最難的，是邁出第一步。
", src: '
../../image/day01.jpg'
, showModalStatus: false, catalog: [ {
section: "1. xxx" }
, {
section: "2. xxx" }
, {
section: "3. xxx" }
, {
section: "4. xxx" }
, ] }
然后在 details.wxml 中插入彈窗，并用條件渲染（wx:if）來判斷是否渲染（顯示）彈窗。
同時(shí)為每一個(gè) 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 事件處理，包括顯示和關(guān)閉事件：
powerDrawer: function (e) {
console.log("clicked");
var currentStatu = e.currentTarget.dataset.statu;
var index = e.currentTarget.id;
// 關(guān)閉 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 設(shè)置一下彈窗和遮罩層的樣式：
.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;
/* 超出父盒子高度可滾動(dòng) */ }
.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，模擬彈窗也實(shí)現(xiàn)了。
預(yù)覽圖片最后一步就是在第一個(gè)頁(yè)面實(shí)現(xiàn)圖片預(yù)覽和圖片保存的功能，在 index.wxml 中為圖片添加一個(gè)點(diǎn)擊事件 previewImage。
pic'
mode='
widthFix'
src='
../../image/GoZeroWaste.jpg'
bindtap='
previewImage'
>在 index.js 中添加 imgalist 項(xiàng)（我們直接把公眾號(hào)的二維碼圖片上傳到 CSDN 的圖片服務(wù)器了），并且實(shí)現(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, // 當(dāng)前顯示圖片的http鏈接 urls: this.data.imgalist // 需要預(yù)覽的圖片http鏈接列表 }
) }
,大功告成，點(diǎn)擊開發(fā)者工具中的 “預(yù)覽”，使用微信掃描生成的二維碼即可在手機(jī)端查看。
教程就到這里，希望大家可以對(duì)微信小程序有所了解。
本文轉(zhuǎn)自：
https://luhuadong.blog.csdn.net/article/details/86181251推薦教程：
《微信小程序》以上就是八分鐘帶你入門微信小程序開發(fā)的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
微信小程序開發(fā)本文轉(zhuǎn)載于：
CSDN，如有侵犯，請(qǐng)聯(lián)系[email protected]刪除
上一篇：
小程序new Date()方法失效怎么辦
下一篇：
小程序頁(yè)面間傳遞數(shù)據(jù)的方式相關(guān)文章相關(guān)視頻小程序開發(fā)經(jīng)驗(yàn)的總結(jié)微信小程序開發(fā)中var that =this的基本...微信小程序開發(fā)初次體驗(yàn)新手必備的微信小程序開發(fā)指南八分鐘帶你入門微信小程序開發(fā)微信小程序開發(fā)工具的安裝認(rèn)識(shí)小程序開發(fā)工具