微信小程序入门案例-会议邀请函

微信小程序入门案例-会议邀请函

涉及内容：地图

目录结构：

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>
      这是一封正经的邀请函，邀请正经的人进来参加的正经会议。\n各位正经人士想必都对这个正经会议产生了浓厚的正经兴趣。\n快来加入正经的我们吧！！！\n承办方：正经委员会\n协办方：正经人类研究会

    </text>
  </view>
</view>
  <view class="box">
    <view class="title">活动背景</view>
    <view class="content">
      <text>现如今，正经人越来越少了。\n我们仅存的正经人面临巨大的正经使命。\n各位正经人士，崛起吧。\n扛起正经的大旗\n进发</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日|正经人类研究中心</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({

  /**
   * 页面的初始数据
   */
  data: {
    guest:[{
      avatar:'/images/2.jpg',
      name:'正经人1号'
    },{
      avatar:'/images/3.jpg',
      name:'正经人2号'
    }],
    lat:39.90467,
    lon:116.39403,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },
  /**
   * 查看位置
   */
  showGuide:function(){
    var that = this;
    wx.openLocation({
      latitude: that.data.lat,
      longitude: that.data.lon,
    })
  },

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

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

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

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

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

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

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

 

app.js

//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

app.json

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

 

运行截图：