【学习】微信小程序开发
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 对 等转义字符进行转义
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);
}
})
})本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/03/22 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
