微信小程序入门案例-会议邀请函
涉及内容:地图
目录结构:
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" }
运行截图: