第2章 小程序项目结构配置

本文主要是介绍第2章 小程序项目结构配置，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

效果

app.json

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#ffd1b3",
    "navigationBarTitleText": "我的小程序",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

index.js

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    key: "hellow world",
    id: "number",
    flag: false,
    num1: 2,
    num2: 3,
    show: false,
    array:[
      {message:'qi'},
      {message:'chao'},
      {message:'fan'}
    ],
    item1:{
      city: "北京",
      encode: '100000'
    },
    item2:{
      city: "上海",
      encode: '200000'
    },

    content:[
      {"name":"蛰雪华", "phone":"153059154774"},
      {"name":"里希冯","phone":"13214265505"}
    ]
  },
  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onl oad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    console.log(e)
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

index.wxml

<!-- 数据绑定 -->
<view class="container">
  {{key}}
</view>

<view id="item-{{id}}">
  hello
</view>

<!-- 三目运算符 -->
<view hidden="{{flag?true:false}}">
  隐藏
</view>

<!-- 算术运算 -->
<view>
  {{num1 + num2}}
</view>

<!-- 字符串运算 -->
<view>
  {{"hello" + key}}
</view>

<!-- 条件渲染 -->
<view wx:if="{{show}}">
  show
</view>
<view wx:else>
  hidden
</view>

<!-- 列表渲染 -->
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}} : {{itemName.message}}
</view>


<!-- 模板 -->
<template name="tempName">
  <view>
    <text>城市：{{city}}`</text>
    <text>邮编：{{encode}}</text>
  </view>
</template>

<!-- 使用模板 -->
<template is="tempName" data="{{...item1}}"/>
<template is="tempName" data="{{...item2}}"/>

<block wx:for="{{content}}" wx:key="{{index}}">
  <!-- 一个通信录数据 -->
  <view class="content">
    <!-- item为默认的每一个数据，通过".name"取出数据 -->
    <view class="name">
     姓名：{{item.name}}
    </view>
    <!-- item为默认的灭一个数据，通过".phone"取出数据 -->
    <view class="phone">
     手机号：{{item.phone}}
    </view>
  </view>
</block>

index.wxss

.container{
  text-align: center;
  background: blue;
  padding: 0;
}
#item-number{
  background: orange;
  padding: 10px 30px;
  text-align: center;
}

.content{
  width: 100%;
  padding: 10px 20px;
  border-radius: 1px solid lightgray;
}
.content .name{
  color: blue;
  font-size: 17px;
}
.content .phone{
  color: red;
  font-size: 14px;
}

这篇关于第2章 小程序项目结构配置的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！