<p>根目录下有3个文件:app.js、app.json、app.wxss,小程序必须有这3个描述 APP 的文件,并放在根目录下。这3个是应用程序级别的文件,与之平行的还有一个 pages 文件夹,用来存放小程序的各个页面。 <p>我们可以和 web 前端开发技术做个类比:. ├── app.js # 小程序的逻辑文件 ├── app.json # 小程序的配置文件 ├── app.wxss # 全局公共样式文件 ├── pages # 存放小程序的各个页面 │ ├── index # index页面 │ │ ├── index.js # 页面逻辑 │ │ ├── index.wxml # 页面结构 │ │ └── index.wxss # 页面样式表 │ └── logs # logs页面 │ ├── logs.js # 页面逻辑 │ ├── logs.json # 页面配置 │ ├── logs.wxml # 页面结构 │ └── logs.wxss # 页面样式表 ├── project.config.json └── utils └── util.jsSalin selepas log masuk
{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "balack" } }
{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#2f2f8f", "navigationBarTitleText": "GoZeroWaste", "navigationBarTextStyle":"white" }, "tabBar":{ "color": "#bfc1ab", "selectedColor": "#13b11c", "backgroundColor": "#1f1f4f", "list": [ { "pagePath": "pages/index/index", "iconPath": "image/icon_component.png", "selectedIconPath": "image/icon_component_HL.png", "text": "个人中心" }, { "pagePath": "pages/details/details", "iconPath": "image/icon_API.png", "selectedIconPath": "image/icon_API_HL.png", "text": "生活指南" } ] }}
<!--index.wxml--> <view class="container"> <view class="userinfo"> <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> <block wx:else> <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </block> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> </view>
<!--index.wxml--><view class="container"> <view class="userinfo"> <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> <block wx:else> <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </block> </view> <!-- <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> --> <view class="ID_Badge"> <view> <text class="ID_info">{{company}}</text> </view> <view> <text class='ID_info'>{{position}}</text> </view> <view> <text class='ID_info'>{{lesson}}</text> </view> </view></view>
{{company}}
、{{position}}
和 {{lesson}}
作为占位符,用法类似于 Django 的模板语言。当然也可以直接用相应的字符来替换它,只不过我们想沿用 {{motto}}
的做法,让你知道在哪里修改这些数据。没错,就是在 index.js 文件:
Page({ data: { motto: 'Hello World', company: "GoZeroWaste", lesson: "21天零垃圾生活指南", position: "垃圾魔法师", /* ... */ }
<view>
组件类似于网页开发中的 <p>
,而 <text>
组件是用来写文本的,需要注意的是 <text/>
组件内只支持 <text/>
嵌套。当然,可用用 <image>
插入图片,图片要保存到 image 目录,否则在测试的时候是无法上传的。
<view class="ID_Badge"> <!-- 省略 --> <view> <text class='ID_info'>{{lesson}}</text> </view> <view> <image class='pic' mode='widthFix' src='../../image/GoZeroWaste.jpg'></image> </view> </view>
/**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":[ "pages/index/index", "pages/logs/logs", "pages/details/details" ]
{ "pagePath": "pages/details/details", "iconPath": "image/icon_API.png", "selectedIconPath": "image/icon_API_HL.png", "text": "生活指南" }
<!--pages/details/details.wxml--> <view> <view class='title'> <text>21天零垃圾生活指南</text> </view> </view>
/* pages/details/details.wxss */ .title { display: flex; flex-direction: column; align-items: center; margin-top: 40rpx; margin-bottom: 40rpx; font-size: 40rpx; }
// 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 文件:
<view> <view wx:for="{{list}}" wx:key="id" > <view class="lesson" id="{{item.id}}"> <image class="lessonPic" mode='aspectFit' src="{{item.src}}"></image> <view class="lessonName">{{item.name}}</view> <view class="lessonIntroduce">{{item.introduce}}</view> </view> </view> </view>
.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; }
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" }, ] }
wx:if
)来判断是否渲染(显示)弹窗。同时为每一个 item 添加 data-statu 来表示弹窗的状态。如下:
<view> <view wx:for="{{list}}" wx:key="id" > <view class="lesson" bindtap='powerDrawer' data-statu='open' id="{{item.id}}"> <image class="lessonPic" mode='aspectFit' src="{{item.src}}"></image> <view class="lessonName">{{item.name}}</view> <view class="lessonIntroduce">{{item.introduce}}</view> </view> <!-- 弹窗 --> <view class='drawer_box' wx:if='{{item.showModalStatus}}' id='{{item.id}}'> <view class="title">{{item.name}}</view> <view class='drawer_content'> <view class='title' wx:for='{{item.catalog}}' wx:for-item='catalog' wx:key='id'> {{catalog.section}} </view> </view> <!-- 确定按钮 --> <view class='btn_ok' bindtap='powerDrawer' data-statu='close' id='{{item.id}}'>确定</view> </view> </view> <!-- 遮罩层 --> <view class='drawer_screen' data-statu='close' wx:if='{{showModalStatus}}'></view> </view>
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, }); } },
.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; }
<image class='pic' mode='widthFix' src='../../image/GoZeroWaste.jpg' bindtap='previewImage'></image>
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链接列表 }) },
Atas ialah kandungan terperinci 八分钟带你入门微信小程序开发. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!