8分钟开始微信小程序开发（微信小程序开发教程概述）

mode='widthFix'表示宽度不变，高度自动变化，长宽比表示它将被改变。 原始图像保持不变，并进行缩放以适合屏幕尺寸。

接下来，您需要修改index.wxss 文件并设置其样式。

/**index.wxss**/ .userinfo { 显示：flex; flex-direction：column； }.userinfo-头像{宽度：128rpx;高度：128rpx;边距：20rpx;边框-半径：50%;}.userinfo-昵称{颜色：#aaa;}.usermotto {边距-顶部：200px;}.ID_Badge { padding-顶部：20rpx;颜色：蓝色;}.ID_info {显示：flex; flex-方向：列；对齐-项目：中心；}.pics { 宽度： 400rpx;}

保存并更新您的个人中心页面面条完成。

生活指南

原始项目页面只有两个目录：index和log，我们还需要创建第二个页面目录。

创建页面有两种方法。

在目录结构页面图上，新建一个目录，并在该目录下创建各个页面配置文件。 直接在 app.json 下方添加

建议。 使用第二种方法修改app.json文件。

 { "pages":[ "pages/index/index", "pages/logs/logs", "pages/details/details" ]

保存并刷新，您将看到此页面在您的目录结构中自动创建。 同样，我们需要更改app.json中的tabBar链接（实际上，我们已经这样做了）。

 /details", "iconPath": " image/icon_API.png", "selectedIconPath": "image/icon_API_HL.png", "text": "生活指南" }

接下来修改details.wxml，设置该页面的标题。

    21天零浪费生活指南   

details.wxss 更改配置样式：

 /* Pages/details /details.wxss */ .title { { display : Flex - 方向: Column; 对齐方式 - Top: 40 rpx; Font - Size: 40 rpx; >此页面为列表显示页面。
//pages/details/details.jsPage( { /* * * 页面初始数据 */ data: { showModalStatus: false, list: [{Id: 0, name: "写一篇‘垃圾日记’”, INTRODUCE: “零浪费不是一个宏大的工程，而是由日常生活中的小习惯和选择组成的。 最困难的是第一步。  ", src : '../../image/day01.jpg', showModalStatus: false, 目录: [部分: "1.xxx" }, { 部分: "2.xxx" }, { 部分: "3. xxx" }, { section: "4. 那是一个塑料袋，而且这些袋子带我回家后也难逃被扔进垃圾桶的命运。  ", src: '../../image/day02.jpg', showModalStatus: false, 目录: [                                         ​| 重复渲染。    修改Details.wxml 文件。  
 数组中当前项目的变量名称默认为 item。    
修改details.wxss文件以添加样式。  
 .lesson { height: 190rpx; padding-left: 20rpx } .    LessonPic { 位置：绝对； 宽度：150rpx； .lessonName { 位置：绝对； 字体-si；ze: 35rpx; . 课程介绍 { 位置: 绝对; 边缘- 顶部: 60rpx; 颜色: rgb(185, 161, 161); ]Size: 28rpx; }
现在，第二页也完成了。    
模拟弹出窗口

下一步，我需要模拟“生活指南”页面弹窗的效果。  它没有正确显示。  仅在单击时出现。  点击下面的“确定”，它就会消失。    
要实现此功能，您必须在组件中绑定事件处理函数bingingtap。  当您单击某个组件时，小程序会在与该页面对应的页面中查找相应的事件处理函数。    
首先，在details.js中为每列数据引入一个布尔变量showModalStatus来描述对应弹窗的状态。 初始值为 false，即不显示。    同时，在外层还添加了一个初始值为 false 的 showModalStatus 变量，以达到屏蔽的效果。    像这样： 
 data: { showModalStatus: false, list: [ { id: 0, name: "写一篇《垃圾日记》'''，简介：“零浪费并不是一个宏大的工程，而是由日常生活中的小习惯和选择组成的。    最困难的部分是迈出第一步。    ", src: '../../image/day01.jpg', showModalStatus: false, 目录: [section: "1.xxx" }, {section: "2.xxx"}, .xxx"}, popup确定窗口是否呈现（可见）。  同时在每一项上添加data-statu来表示弹窗的状态。  
  [ k3] 弹出窗口 --> - ->  好的       
在details.js中添加powerDrawer事件处理，包括显示和关闭事件。  
 powerDrawer: function (e) { console .log("click"); var currentStatu = e.currentTarget.dataset.statu; currentTarget.id; // 关闭 if (currentStatu == 'close') { this.data.list[index]. showModalStatus = false;dalStatus: 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; 溢出：隐藏； 顶部： 50%； z-index： 1001； 边距： - 150px 50rpx 0 50rpx； #E8E8EA; height: 210px; Overflow-y: 滚动; /* 可以滚动超出父框高度 */ } .btn_ok { padding: 10px "microsoft yahei";t-对齐：中心；边框-顶部：1.5px 颜色：#3CC51F； .drawer_screen { 宽度：100%；位置：固定； z-index: 1000; 背景: 黑色; 不透明度: 0.5; 溢出: 隐藏; }
好的，模拟弹出窗口也已经实现了。    
预览图片

最后一步就是它如下：  该页面实现了图像预览和图像保存功能。  在index.wxml中的图片中添加点击事件的previewImage。    
 
在index.js中添加imgalist项（直接添加官方二维码），图片为上传到CSDN的图片服务器），并实现了previewImage事件处理。    像： 
 Page({ data: { 座右铭: 'Hello World', Company: "GoZeroWaste"，课程：《21天零浪费生活指南》，posity：《垃圾魔术师》，imgalist：['img_6707469b90474']，userInfo：{}，haSuserinfo：false，C，C aniuse：wx.caniuse('Button.open - type.getUserInfo') },reviewImage: function (e) { wx.previewImage({ current: this.data.imgalist, // 当前显示图片的 URL http 链接: this.data.imgalist //需要预览的图片http链接列表})，
就是这样！ 在开发者工具中点击预览，使用微信扫描生成的二维码并在手机上查看。    
本教程到此结束。  希望大家能够理解微信小程序。    
本文转载自：https://luhuadong.blog.csdn.net/article/details/86181251
推荐教程：《微信小程序》