微信小程序

文章目录


简介

  • 小程序包含一个描述整体程序的app和多个描述各自页面的page
  • 一个小程序主体部由三个文件组成,必须放在根目录
    • app.js主要是小程序的逻辑
    • app.json是小程序公共配置
    • app.wxss是小程序公共样式表
  • 一个小程序页面由四个文件组成:js、wxml、json和wxss。
  • 其中js(逻辑)和wxml(结构)是必须要有的
  • json页面数据
  • wxss页面样式

index.js

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

xml 复制代码
<!--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

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

xml 复制代码
<!--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>
相关推荐
老华带你飞6 小时前
畅阅读小程序|畅阅读系统|基于java的畅阅读系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序·毕设·畅阅读系统小程序
老华带你飞13 小时前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
项目題供诗13 小时前
微信小程序开发教程(八)
微信小程序·小程序
00后程序员张20 小时前
iOS App 混淆与资源保护:iOS配置文件加密、ipa文件安全、代码与多媒体资源防护全流程指南
android·安全·ios·小程序·uni-app·cocoa·iphone
低代码布道师20 小时前
少儿舞蹈小程序(12)作品列表查询搭建
低代码·小程序
编程迪1 天前
基于Java+Vue开发的家政服务系统源码适配H5小程序APP
小程序·家政小程序·家政系统源码·家政系统·家政源码
拼图2091 天前
微信小程序——云函数【使用使用注意事项】
微信小程序·小程序
fakaifa1 天前
【独立版】智创云享知识付费小程序 v5.0.23+小程序 搭建教程
小程序·uni-app·知识付费·源码下载·智创云享独立版
2501_916007471 天前
Transporter App 使用全流程详解:iOS 应用 ipa 上传工具、 uni-app 应用发布指南
android·ios·小程序·https·uni-app·iphone·webview
fakaifa1 天前
CRMEB多门店 v3.3源码 无授权限制+PC端+uniapp前端
小程序·uni-app·商城小程序·技术教程·源码下载·crmeb多门店