ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2021-09-07 21:32:15  阅读:121  来源: 互联网

标签:index name 项目 配置 程序 用户 message getUserProfile logs


效果

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;
}

标签:index,name,项目,配置,程序,用户,message,getUserProfile,logs
来源: https://www.cnblogs.com/urahyou/p/15240283.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有