微信小程序实战1-简单的静态页面

最新推荐文章于 2024-04-30 15:31:03 发布

树旅小爷

最新推荐文章于 2024-04-30 15:31:03 发布

阅读量2.2k

点赞数 2

分类专栏：微信小程序

本文链接：https://blog.csdn.net/milk_tiger/article/details/104668811

版权

本文介绍了如何在微信小程序中实现一个简单的静态页面，包括页面的基本结构、样式设置和内容展示，帮助开发者快速入门小程序开发。

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

效果：
在这里插入图片描述

代码：

/*app.json*/
{
   
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/user/user"
  ],
  "window": {
   
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#2e5e86",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
   
    "list": [
      {
   
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/h1.png",
        "selectedIconPath": "images/h1.png"
      },
      {
   
        "pagePath": "pages/user/user",
        "text": "用户中心",
        "iconPath": "images/h3.png",
        "selectedIconPath": "images/h3.png"
      }
    ]
  }


 /*app.js*/
App({
   

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

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

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

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

/* 全局里面有一个用户信息*/
appData : {
   
  userinfo : null,
}

})

<!--index.wxml-->
<view class="container">

<view class="selection">
  <swiper indicator-dots="true" autoplay="true" interval="3000" duration="1000">
    <block wx:for="{
   {imgUrls}}">
      <swiper-item>
        <image src="{
   {item}}" class="slide-image" width="355" height="150"/>
      </swiper-item>
    </block> 
  </swiper>
</view>

<view class="selection">
  <view class="header">
    <text>精品推荐</text>
    <text class="text-all">全部精品</text>
  </view>

  <view class="content">
    <view class="content-item" wx:for="{
   {contentItems}}">
      <image src="/images/h2.png"/>
        <view class=

最低0.47元/天解锁文章