微信小程序

文章目录

• 简介
• index.js
• index.wxml
• demo
• • index.js
  • index.wxml

简介

• 小程序包含一个描述整体程序的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

<!-- <navigation-bar title="123" back="{{false}}" color="black" background="#FFF" /> -->
<!-- 
  
    页面内容
  
 -->

<view class="container">
	<view>
		普通信息：{{msg1}}
		<br/>
		用户信息：{{userName}}
		<br/>
		<image src="{{userImage}}" style="width: 100px;height:100px"></image>
	</view>


	
	<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

<!-- <navigation-bar title="123" back="{{false}}" color="black" background="#FFF" /> -->
<!-- 
  
    页面内容
  
 -->

<view class="container">
	<view>
		普通信息：{{msg1}}
		<br/>
		用户信息：{{userName}}
		<br/>
		<image src="{{userImage}}" style="width: 100px;height:100px"></image>
	</view>


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