[小程序]小程序框架的简单页面布局 - Powered by Discuz! Archiver

首页 › 公众号/小程序论坛 › [小程序]小程序框架的简单页面布局

陶声依然 發表於 2019-8-17 01:10:00

[小程序]小程序框架的简单页面布局

<p>1.首先下载小程序开发工具</p>
<p>2.小程序中的wxml就相当于html , wxss就相当于css</p>
<p>3.布局和html布局几乎一样</p>
<p>4.宽度使用百分比</p>
<p>5.input框里的文字上下居中是用padding撑出来的</p>
<p>6.最下面的文字靠右，view相当于一个块元素，设定宽度后，text-align右对齐</p>
<p>简单的测试界面如图</p>
<p><img src="https://img2018.cnblogs.com/blog/726254/201908/726254-20190817010433799-1014789370.png" alt=""></p>
<p>index.wxml代码</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)"></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">view </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="container"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">text </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="indexTitle"</span><span style="color: rgba(0, 0, 255, 1)">></span>添加邮箱账号<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">text</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">view </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="indexInput"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">input</span><span style="color: rgba(255, 0, 0, 1)">maxlength</span><span style="color: rgba(0, 0, 255, 1)">="10"</span><span style="color: rgba(255, 0, 0, 1)"> placeholder</span><span style="color: rgba(0, 0, 255, 1)">="邮箱地址"</span> <span style="color: rgba(0, 0, 255, 1)">/></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">view </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="indexInput"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">input</span><span style="color: rgba(255, 0, 0, 1)">maxlength</span><span style="color: rgba(0, 0, 255, 1)">="10"</span><span style="color: rgba(255, 0, 0, 1)"> placeholder</span><span style="color: rgba(0, 0, 255, 1)">="密码"</span> <span style="color: rgba(0, 0, 255, 1)">/></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">view </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="indexButton"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">button </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="primary"</span><span style="color: rgba(0, 0, 255, 1)">></span> 登录 <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">button</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">view </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="indexNologin"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">a </span><span style="color: rgba(255, 0, 0, 1)">href</span><span style="color: rgba(0, 0, 255, 1)">=""</span><span style="color: rgba(0, 0, 255, 1)">></span> 无法登录 <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">a</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p>index.wxss代码</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">*index.wxss*</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(128, 0, 0, 1)">
.indexTitle</span>{<span style="color: rgba(255, 0, 0, 1)">
color</span>:<span style="color: rgba(0, 0, 255, 1)"> #ccc</span>;<span style="color: rgba(255, 0, 0, 1)">
margin</span>:<span style="color: rgba(0, 0, 255, 1)">15px 0</span>;<span style="color: rgba(255, 0, 0, 1)">
font-size</span>:<span style="color: rgba(0, 0, 255, 1)"> 20px</span>;
}<span style="color: rgba(128, 0, 0, 1)">
.indexInput</span>{<span style="color: rgba(255, 0, 0, 1)">
margin-bottom</span>:<span style="color: rgba(0, 0, 255, 1)"> 15px</span>;<span style="color: rgba(255, 0, 0, 1)">
border</span>:<span style="color: rgba(0, 0, 255, 1)"> 1px solid #ccc</span>;<span style="color: rgba(255, 0, 0, 1)">
padding</span>:<span style="color: rgba(0, 0, 255, 1)">11px 4px</span>;<span style="color: rgba(255, 0, 0, 1)">
width</span>:<span style="color: rgba(0, 0, 255, 1)"> 90%</span>;<span style="color: rgba(255, 0, 0, 1)">
border-radius</span>:<span style="color: rgba(0, 0, 255, 1)"> 4px</span>;
}<span style="color: rgba(128, 0, 0, 1)">
.indexButton</span>{<span style="color: rgba(255, 0, 0, 1)">
padding</span>:<span style="color: rgba(0, 0, 255, 1)">0 4px</span>;<span style="color: rgba(255, 0, 0, 1)">
width</span>:<span style="color: rgba(0, 0, 255, 1)"> 93%</span>;
}<span style="color: rgba(128, 0, 0, 1)">
.indexNologin</span>{<span style="color: rgba(255, 0, 0, 1)">
color</span>:<span style="color: rgba(0, 0, 255, 1)"> #049c4d</span>;<span style="color: rgba(255, 0, 0, 1)">
font-size</span>:<span style="color: rgba(0, 0, 255, 1)"> 14px</span>;<span style="color: rgba(255, 0, 0, 1)">
margin-top</span>:<span style="color: rgba(0, 0, 255, 1)"> 10px</span>;<span style="color: rgba(255, 0, 0, 1)">
text-align</span>:<span style="color: rgba(0, 0, 255, 1)"> right</span>;<span style="color: rgba(255, 0, 0, 1)">
width</span>:<span style="color: rgba(0, 0, 255, 1)"> 93%</span>;
}</pre>
</div>
<p> </p>
<p><img src="https://img2018.cnblogs.com/blog/726254/201908/726254-20190817010943395-505125047.png" alt=""></p>
<p> </p>

</div>
<div id="MySignature" role="contentinfo">
<h3>十年开发经验程序员，离职全心创业中，历时三年开发出的产品《唯一客服系统》</h3>
<div> 一款基于Golang+Vue开发的在线客服系统，软件著作权编号：2021SR1462600。一套可私有化部署的网站在线客服系统，编译后的二进制文件可直接使用无需搭开发环境，下载zip解压即可，仅依赖MySQL数据库，是一个开箱即用的全渠道在线客服系统，致力于帮助广大开发者/公司快速部署整合私有化客服功能。 </div>
<div> 开源地址：唯一客服（开源学习版） </div>
<div> 官网地址：唯一客服官网 </div><br><br>
来源：https://www.cnblogs.com/taoshihan/p/11367118.html

頁: [1]

查看完整版本: [小程序]小程序框架的简单页面布局