微信小程序

---

简介

• 小程序包含一个描述整体程序的app和多个描述各自页面的page
• 一个小程序主体部由三个文件组成，必须放在根目录
  • app.js主要是小程序的逻辑
  • app.json是小程序公共配置
  • app.wxss是小程序公共样式表

• 一个小程序页面由四个文件组成：js、wxml、json和wxss。
• 其中js（逻辑）和wxml（结构）是必须要有的
• json页面数据
• wxss页面样式
  

index.js

// index.js
Page({//定义数据data: {msg1: '我是msg1，我在js中',userName:'',userImage:''},//自定义方法getInfo1() {//wx默认对象，获取用户信息wx.getUserProfile({desc: '获取用户信息',//获取信息success: (res) => {console.log(res.userInfo)//赋值this.setData({userName:res.userInfo.nickName,userImage:res.userInfo.avatarUrl})}})}
})

index.wxml

<!--index.wxml-->
<!-- <navigation-bar title="123" back="{{false}}" color="black" background="#FFF" /> -->
<!-- <scroll-view class="scrollarea" scroll-y type="list"><view class="container">页面内容</view>
</scroll-view> --><view class="container"><view>普通信息：{{msg1}}<br/>用户信息：{{userName}}<br/><image src="{{userImage}}" style="width: 100px;height:100px"></image></view><!--type="primary,default,warn" --><button type="primary" bindtap="getInfo1" >获取用户信息</button></view>

demo

index.js

// index.js
Page({//定义数据data: {msg1: '我是msg1，我在js中',userName: '',userImage: '',//授权码code: ''},//自定义方法getInfo() {//wx默认对象，获取用户信息wx.getUserProfile({desc: '获取用户信息',//获取信息success: (res) => {console.log(res.userInfo)//赋值this.setData({userName: res.userInfo.nickName,userImage: res.userInfo.avatarUrl})}})},//登录，获取授权码login() {wx.login({success: (res) => {console.log(res.code)this.setData({code: res.code})},})},//发送请求sendMsg() {wx.request({url: 'http://localhost:8080/user/shop/status',method: 'GET',success: (res) => {console.log(res.data)}})}
})

index.wxml

<!--index.wxml-->
<!-- <navigation-bar title="123" back="{{false}}" color="black" background="#FFF" /> -->
<!-- <scroll-view class="scrollarea" scroll-y type="list"><view class="container">页面内容</view>
</scroll-view> --><view class="container"><view>普通信息：{{msg1}}<br/>用户信息：{{userName}}<br/><image src="{{userImage}}" style="width: 100px;height:100px"></image></view><!--type="primary,default,warn" --><button type="primary" bindtap="getInfo" >获取用户信息</button>----------------------------------------------<br/><view>只能用一次的授权码：{{code}}</view><button type="warn" bindtap="login" >登录</button>----------------------------------------------<br/><view>发送请求：{{code}}</view><button type="primary" bindtap="sendMsg" >发送请求</button>
</view>