[运城外贸seo公司]微信小程序开发怎样创建页面

　　我们有两个页面●▼，index 页面和 logs 页面，贵阳市小程序制作公司即欢迎页和小程序启动日志的展示页，他们都在 pages 目录下◇…▷。微信小程序中的每一个页面的【路径 + 页面名】都需要写在 app.json 的 pages 中▼▽•，且 pages 中的第一个页面是小程序的首页。

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss◁△•、index◇=□.json。.js 后缀的文件是脚本文件，.json 后缀的文件是配置文件●☆○，▲▷△.wxss 后缀的是样式表文件，建德市小程序开发哪家好[运城外贸seo公司]▲□◆.wxml 后缀的文件是页面结构文件。阜阳市小程序开发哪家好

index.wxml 是页面的结构文件：

<font size="3"▪▽-…; face="微软雅黑" style=""><△★!--index•△.wxml-->
<view class="container"▪▼;>
 <▲★◁▷;view bindtap="○▼□;bindViewTap" class="userinfo">
 <image class="userinfo-avatar" src="=•△◁;{{userInfo.avatarUrl}}"◇•; background-size="○▽=;cover"></image>
 <text class="●▼;userinfo-nickname">{{userInfo★☆◁….nickName}}</text>
 <▷△●;/view>
 <view class="••▼▪;usermotto">
 <text class="user-motto">▼☆…;{{motto}}</text>
 <△▼•;/view>…▼•=;
</view></font>▼☆☆□;

本例中使用了 、=●、 来搭建页面结构=•●△，绑定数据和交互处理函数。

index.js 是页面的脚本文件，在这个文件中我们可以监听并处理页面的生命周期函数■▽●○、获取小程序实例，声明并处理数据，响应页面交互事件等△□◇。

<•▼▪=;font size="▲•●;3" face="微软雅黑" style="">▼◆;//index.js
// 获取应用实例
var app = getApp()
Page({
 data◁★=▽: {
 motto: '△◇;Hello World',
 userInfo: {}
 },
 // 事件处理函数
 bindViewTap: function() {
 wx◁○☆■.navigateTo({
 url: '-…◆△.◁○./logs/logs'
 })
 }□•◁,
 onLoad=☆: function () {
 console.log('onLoad'●•;)
 var that = this
 // 调用应用实例的方法获取全局数据
 app=◇○.getUserInfo(function(userInfo){
 // 更新数据
 that.setData({
 userInfo:userInfo
 })
 })
 }
})</font>

index.wxss 是页面的样式表：
<font size="3" face="微软雅黑" style="">/**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;
}</font>

复制代码

页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表▲……◇，也可以在页面的结构文件中直接使用 app■△•.wxss 中指定的样式规则。

index.json 是页面的配置文件：

页面的配置文件是非必要的。当有页面的配置文件时•◆▼◁，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。[教育行业搜索引擎优化]小程序怎么把图片链接到新页面如果没有指定的页面配置文件▽◆◁，则在该页面直接使用 app•◇★▲.json 中的默认配置●-△。

logs 的页面结构

<font size="3" face="•□□;微软雅黑" style=""><▼•▲◁!--logs.wxml-->
<view class="-•;container log-list"▪▼;>
 <▼…○;block wx:for-items="…◇▼;{{logs}}" wx•▷-:for-item="log">□●;
 <■★▼;text class="▲◆★;log-item">{{index + 1}}▼□. {{log}}</text>
 <○●▷;/block>
</view>☆◆;</font>■▼◇▪;

logs 页面使用 控制标签来组织代码，在 上使用 wx:for-items 绑定 logs 数据，并将 logs 数据循环展开节点

<•-▼;font size="■•☆;3"▽◇★; face="微软雅黑" style="">▼▽★☆;//logs◆…-◆.js
var util = require('../▽▪.◇□▪…./utils/util.js'…◁△;)
Page({
 data◆▷•□: {
 logs: []
 }▪★•☆,
 onLoad-△▲: function () {
 this.setData({
 logs: (wx.getStorageSync('logs') 

　　 []).map(function (log) { return util◆■.formatTime(new Date(log)) }) }) } })</font>

　　相信看了本文案例你已经掌握了方法，更多精彩请关注久澳传媒编程栏目其它相关文章！

　　推荐阅读：

微信小程序开发获取用户基本信息

微信小程序开发怎样创建项目

　　以上就是微信小程序开发怎样创建页面的详细内容，更多请关注久澳传媒编程栏目其它相关文章！