【学习】微信小程序开发

---

1. 下载编辑器

百度搜索微信小程序，在开发者工具里面下载即可。

安装完毕之后创建一个小程序项目，选择测试ID。

2. 项目目录

app.json

• pages：用于登记注册页面，小程序按照pages中的页面顺序进行展示
  .wxml ：html的封装版本，支持原生html或者wx的一些自定义标签
  .wxss：css的封装版本，支持原生css或者wx的一些自定义标签
  .js：定义数据等js使用方式，用法有点像vue

3. 组件

这里的组件，就是wxml标签

view
类似于div+p标签，块级标签

text
类似于span，行级标签

属性：

• selectable 长按字能够被选中
• decode 对&nbsp等转义字符进行转义

rich-text
用于展示带html原生标签

xx.json中

Page({
	data: {
		msg:"<h1>Hello</h1>"
	}，
})

wxml中

<rich-text nodes="{{msg}}">
</rich-text>

button
属性type用于调整样式，包括warn等通用样式。

绑定事件：

Page({
	data: {
	}，
	// 直接在这里声明方法
	clickMe(){
		console.log("点击我");
	},
})

wxml中

<button bindtap="clickMe"></button>

属性：一键联系客服

<button open-type="contact">
联系客服
</button>

属性：获取当前用户信息

<button open-type="getUserInfo" bindgetUserInfo="getUserInfo">
获取用户信息
</button>

 getUserInfo(e){
    console.log(e);
  },

将getUserInfo全部改为getPhoneNumber即可用户获取手机号

4. 指令

取值：
this.data.msg

赋值：
在方法中：
this.setData({
msg: “World”
})

组件的使用：

<button bindtap="toast"></button>

toast(){
	wx.showToast({
		title:'成功',//弹窗显示，可省略
		icon:'success',//弹窗类型
		duration:2000 //弹窗时间  毫秒
	})
}

更多组件查看官方

网页跳转：

跳转到首页，相当于a标签
<navigator url="../index/index">跳转</navigator>

通过按钮方法跳转
<button bindtap="goIndex">跳转</button>

goIndex(){
	wx.navigatorTo({
		url:'../index/index'
	})
}

函数传参：
使用data-参数名 的属性形式传递

<button bindtap="test" data-id="1">传递参数id</button>

test(e){
	console.log(e)
}

e是一个大的对象，在e.currentTarget.dataset中保存着传递过来的参数

循环：
data中有个数组arr

<view wx:for="{{arr}}" wx:key="username">{{item}}</view>

item是默认的单个对象，可以通过item.username访问嵌套对象
可以通过以下方式改变item的命名

<view wx:for="{{arr}}" wx:for-item="user" wx:key="username">{{user}}</view>

wx:key=“username”,key用于定位复选框

5. 前后端交互

<button bindtap="getData">从后端获取数据</button>

getData({
	wx.request({
		url:'https://localhost:8080/api/users/get/1',
		success:(res)=>{
			console.log(res);
		}
	})
})