微信小程序搭建页面测试实现页面功能-----微信小程序

旧约Alatus

已于 2024-04-12 23:47:08 修改

阅读量648

点赞数 18

分类专栏： # 微信小程序前端 # VUE框架文章标签：前端 javascript 微信小程序 vue.js vue css3 css

于 2024-04-09 12:57:26 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/137547151

版权

前端同时被 3 个专栏收录

329 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

微信小程序

1 篇文章 0 订阅

订阅专栏

这段代码展示了微信小程序中index页面的设计，包括组件布局（如图片、文本和按钮），以及基本的生命周期函数和事件处理，如用户登录、页面显示等。

摘要由CSDN通过智能技术生成

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#f0f",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "游戏空间"
  }
}
{

  "pages": [

    "pages/index/index",

    "pages/logs/logs"

  ],

  "window": {

    "navigationBarBackgroundColor": "#f0f",

    "navigationBarTextStyle": "white",

    "navigationBarTitleText": "游戏空间"

  }

}

<view class="indexContainer">
 <image src="" mode="aspectFill" class="avatarUrl"/>
 <text class="username">{{username}}</text>
  <view class="go"> 
    <text>{{msg}}</text>
  </view>
</view>
<view class="indexContainer">

<image src="" mode="aspectFill" class="avatarUrl"/>

<text class="username">{{username}}</text>

  <view class="go">

    <text>{{msg}}</text>

  </view>

</view>

/* pages/index/index.wxss */
.indexContainer{
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
  background-color: white;
}
.avatarUrl{
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  margin: 100rpx 0;
}
.username{
  font-size: 32rpx;
  margin: 100rpx;
}
.go{
  width: 300rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 28rpx;
  border: 1rpx solid #333;
  border-radius: 10rpx;
}
/* pages/index/index.wxss */

.indexContainer{

  display: flex;

  flex-direction: column;

  height: 100%;

  align-items: center;

  background-color: white;

}

.avatarUrl{

  width: 200rpx;

  height: 200rpx;

  border-radius: 50%;

  margin: 100rpx 0;

}

.username{

  font-size: 32rpx;

  margin: 100rpx;

}

.go{

  width: 300rpx;

  height: 80rpx;

  line-height: 80rpx;

  text-align: center;

  font-size: 28rpx;

  border: 1rpx solid #333;

  border-radius: 10rpx;

}

{
  "usingComponents": {}
}
{

"usingComponents": {}

}

// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg : "点击登录",
    username : "旧约"
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})
// pages/index/index.js

Page({

  /**

   * 页面的初始数据

   */

  data: {

    msg : "点击登录",

    username : "旧约"

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad(options) {

  },

  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady() {

  },

  /**

   * 生命周期函数--监听页面显示

   */

  onShow() {

  },

  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide() {

  },

  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload() {

  },

  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh() {

  },

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom() {

  },

  /**

   * 用户点击右上角分享

   */

  onShareAppMessage() {

  }

})

/* 全局公共样式 */
page {
  height: 100%;
}
/* 全局公共样式 */

page {

height: 100%;

}

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  }
})
App({

  /**

   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）

   */

  onLaunch: function () {



  },

  /**

   * 当小程序启动，或从后台进入前台显示，会触发 onShow

   */

  onShow: function (options) {



  },

  /**

   * 当小程序从前台进入后台，会触发 onHide

   */

  onHide: function () {



  },

  /**

   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息

   */

  onError: function (msg) {



  }

})