微信小程序入門案例-會議邀請函

涉及內(nèi)容：地圖

目錄結(jié)構(gòu)：

pages\index\index.wxml

<view class="box">
  <view class="title">
    會議主題
  </view>
  <image src="/images/1.jpg" style="width:100%" mode="widthFix"></image>
  <view class="content">
    <text>
      這是一封正經(jīng)的邀請函，邀請正經(jīng)的人進來參加的正經(jīng)會議。\n各位正經(jīng)人士想必都對這個正經(jīng)會議產(chǎn)生了濃厚的正經(jīng)興趣。\n快來加入正經(jīng)的我們吧！！！\n承辦方：正經(jīng)委員會\n協(xié)辦方：正經(jīng)人類研究會

    </text>
  </view>
</view>
  <view class="box">
    <view class="title">活動背景</view>
    <view class="content">
      <text>現(xiàn)如今，正經(jīng)人越來越少了。\n我們僅存的正經(jīng)人面臨巨大的正經(jīng)使命。\n各位正經(jīng)人士，崛起吧。\n扛起正經(jīng)的大旗\n進發(fā)</text>
    </view>
  </view>

  <view class="box">
    <view class="title">分享嘉賓</view>
    <view class="content">
      <view class="bar" wx:for='{{guest}}' wx:key='guest{{index}}'> 
        <image class="avatar" src="{{item.avatar}}"></image>
        <text>{{item.name}}</text>
      </view>
    </view>
  </view>

  <view class="box">
    <view class="title">會議地點</view>
    <view class="content">
      <text>2020年2月2日-4040年4月4日|正經(jīng)人類研究中心</text>
      <map latitude="{{lat}}" longitude="{{lon}}"></map>
      <button bindtap="showGuide">查看詳情</button>
    </view>
  </view>

pages\index\index.wxss

.box{
  border: 2rpx solid #00B26A;
  color: #00B26A;
  margin: 15rpx;
  padding: 15rpx;
}
.title{
  font-size: 18pt;
  font-weight: bold;
  padding-bottom: 10rpx;
  border-bottom: 2rpx dashed #00B26A;
}
.content{
  font-size: 12pt;
  margin: 10rpx 0;
  line-height: 80rpx;
}
.bar{
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 16pt;
}
.avatar{
  width: 200rpx;
  height: 200rpx;
  margin-right: 20rpx;
}
map{
  width: 100%;
  height: 400rpx;
}
button{
  color: white;
  background-color: #00B26A;
}

pages\index\index.json

{
  "usingComponents": {}
}

pages\index\index.js

Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    guest:[{
      avatar:'/images/2.jpg',
      name:'正經(jīng)人1號'
    },{
      avatar:'/images/3.jpg',
      name:'正經(jīng)人2號'
    }],
    lat:39.90467,
    lon:116.39403,
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
 >//app.js
App({
  src="https://img-blog.csdnimg.cn/20201013094515663.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlYXRoZXI=,size_16,color_FFFFFF,t_70" />