本文给大家带来的是微信小程序V2EX社区关于我们详细说明设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<include src="/components/header.wxml" />
<view class="container">
<view class="title">About V2EX</view>
<view>V2EX is a community of start-ups, designers, developers and creative people.</view>
<view>V2EX 是创意工作者们的社区。这里目前汇聚了超过 250,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。</view>
<view>希望大家能够多多分享自己正在做的有趣事物、交流想法，在这里找到朋友甚至新的机会。并且，最重要的是，在这一切的过程中，保持对他人的友善。</view>
<view>为了保持这里的良好氛围，V2EX 有自己的明确规则：</view>
<view>
<view>• 这里绝对不讨论任何有关盗版软件、音乐、电影如何获得的问题</view>
<view>• 这里绝对不会全文转载任何文章，而只会以链接方式分享<text class="sup">1</text></view>
<view>• 这里绝对不会有任何教人如何钻空子的讨论</view>
<view>• 这里感激和崇尚美的事物</view>
<view>• 这里尊重原创</view>
<view>• 这里反对中文互联网上的无信息量习惯如“顶”，“沙发”，“前排”，“留名”，“路过”，“不明觉厉”</view>
<view>• 这里禁止发布人身攻击、仇恨、暴力、侮辱性的言辞、暴露他人隐私的“人肉贴”</view>
<view>• 遵守中国的法律</view>
</view>
<view>V2EX is powered by Cloud Community Software - Project Babel 3</view>
<view class="foot">1. V2EX 不反对文章的原作者自己全文转载自己写的原创文章</view>
</view>
<include src="/components/footer.wxml" />
|
二、wxss样式文件代码如下：
/*******容器**********/
.container {
display: flex;
flex-direction: column;
width: 95%;
margin: 0 auto;
box-shadow: 2px 2px 3px #00343f;
margin-bottom: 15rpx;
border-radius: 20rpx;
background-color: #fefefe;
font-size: 25rpx;
padding: 20rpx;
color: #999;
box-sizing: border-box;
}
.container > view{
margin: 20rpx;
}
/*******容器**********/
/*******其他**********/
.title {
font-size: 30rpx;
font-weight: bold;
}
.foot{
font-size: 20rpx;
border-top: 1px solid #ddd;
padding-top: 10rpx;
}
.sup{
vertical-align:super;
}
/*******其他**********/
|
三、js页面代码如下：
// pages/about/about.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
|
.jpg)
.jpg)
