创建项目
1.微信公众平台 注册，登录下载开发工具
2.登录开发工具，新建项目（最好是空的文件目录，项目的appid在微信公众平台--小程序--开发--开发设置--开发者id）
创建好项目后在里面有一个基本的目录结构（project.config.json配置文件，这里面如果想运行别人的微信小程序，需要把appid更改为自己的appid）
在小程序中只有四种文件（.js(逻辑,实例) .json(配置) .wxml(页面结构) .wxss(样式表)）
3.创建一个实例：
app.js
app({...}) 里面存放的是生命周期
分为页面的生命周期和小程序的生命周期
app.json
{...} 里面是全局 的配置
pages：表示有是个页面,哪一个在前面就表示是首页
里面会有自动创建好的页面，或者自己手动创建修改
内部没有dom元素
块级元素：<view></view>
行内元素：<text></text>
设置样式在wxss中设置可以直接是标签名，也可以使用class选择器进行设置
不能使用sass后者less预处理语言
小程序是移动端，就需要适配移动端布局，有一个新的单位rpx，宽度一般是750rpx
window:窗口的配置
如果设置这些配置时颜色只支持16进制的
如果需要设置导航栏的样式需要微信版本大于6.6.0才能够支持
移动端需要做下拉刷新和上拉加载
只要是配置页面的界面显示
networkTimeout:网络请求的时间（响应时间过长时断掉）
tabBaer:可以设置小程序的导航栏（最多5个最少2个，由数组组成）
"tabBaer":{
//设置样式，边框颜色及选中的颜色，定位等
"list":[
{
"pagepath":"", //需要设置的路径
"text":""， //导航栏的名称
"iconpath":"", //默认的图标
"selectIconpath":"" //选中下的样式
},
{
"pagepath":"", //需要设置的路径
"text":"" //导航栏的名称
}
]
}
注意：局部的配置可以覆盖全局 的配置
4.数据的传递
对应的js文件中如果需要传递数据需要用到
在小程序中，没有window对象
page({
data:{
name:"123"
},
//自定义事件,单纯的数据绑定类似vue，但是修改数据类似于react，使用的是this.setData({name:'32432'})
changeName(e){
console.log("事件对象",e) //事件对象，事件对象传递参数需要使用的是data-haha="123"
console.log('456')
}
})
事件分为冒泡事件和非冒泡事件
5.小程序中的指令
条件渲染：
<view wx:if="{{age<20}}">青年</view>
<view wx:else>青年</view>
<button bindlongtap="add">add</button>
add(){
let age=++this.data.age
this.setData({age})
}
列表渲染：
wx:for wx:key wx:for-item wx:for-idnex
<text wx:for="{{info}}">{{item}}{{index}}</text>
<text wx:for="{{info}}" wx:for-item="haha" wx:for-index="xixi">{{xixi}}{{haha}}</text>
6.组件（当做antd使用）
hover-class='test' 鼠标按下时的样式
swiper 参考官方文档
<cover-image src=""></cover-image>这种方式设置的图片是自动按比例缩放，类似背景图片自适应大小进行填充
picker //类似于一个弹出层
经常使用的api及地图组件
获取系统的信息：getSystemInfoSync()
getSystemInfoSync(){
let result = wx.getSystemInfoSync()
console.log(result)
}
调用这个方法即可打印设备的系统信息
路由：配套一共五个
1.wx.switchTab()
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，需要在app.json文件中配置字段，路径后面不能跟参数
goPage(){
wx.switchTab({
url:"要跳转的页子路径"，
fail(err){ //跳转失败时的错误
console.log(err)
}
})
}
跳转后回不去，无数据
2.wx.reLaunch()
关闭所有页面，打开到应用内的某个页面,可以传递参数，
goPage(){
wx.reLaunch({
url:"要跳转的路径?us=123&ps=123" //传递参数跟在路径后面，在目标页面的onlanch生命周期中接收参数，不带反回
})
}
3.wx.redirectTo()
关闭当前的页面，跳转页面，不允许跳转tabbar页面，可以传递参数
goPage(){
wx.redirectTo({
url:"要跳转的路径?us=123&ps=456"
})
}
4.wx.navigateTo()
保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。多的会把前面的覆盖掉
goPage(){
wx.navigateTo({
url:"要跳转的路径?us=123&ps456"
})
}
自带反回'<'
wx.navigateTo()
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
界面交互相关
1.wx.showToast()
显示消息提示框,可以设置提示内容图标延迟时间
success(){
wx.showToast({
title: '成功',
icon: 'success',
duration: 1000
})
}
2.wx.showModal()
显示模态框,能够设置显示的提示标题提示的内容及取消按钮，基本的样式等
success(){
wx.showModal({
title: '提示',
content: '这是一个模态弹窗',
success (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
3.wx.showActionSheet()
显示操作菜单,能够设置按钮的文字数组最大长度为6位，颜色及回调函数等
showActionSheet(){
wx.showActionSheet({
itemList: ['A', 'B', 'C'],
success (res) {
console.log(res.tapIndex)
},
fail (res) {
console.log(res.errMsg)
}
})
}
4.下拉刷新的监听
onPullDownRefresh(){
console.log('刷新了')
wx.showLoading({
title:"数据加载ing",
})
setTimeout(()=>{
wx.hideloading()
wx.stopPullDownRefresh()
},1000)
}
5.导航栏
wx.setNavigationBarTitle()
动态设置当前页面的标题
setNavigationBarTitle(){
wx.setNavigationBarTitle({
title: '当前页面'
})
}
地图组件
使用场景：打卡，定位
1.显示地图
2.获取使用者所在的位置
3.将地图的中心点定位到地图所在的位置
4.气泡
5.点击气泡弹出活动信息
6.数据过滤功能
7.路线图
需要使用地图组件
<map id="map"
longitude="113.324520" //经度
latitude="23.099994" //纬度
scale="14" //缩放
controls="{{controls}}" //点击控件的时候触发的事件，controls事件的api需要写在data中使用数组包裹
bindcontroltap="controltap" //控件
markers="{{markers}}" //页面中的信息，markers中的事件也是需要写在data中使用数组包裹
bindmarkertap="markertap" // 当点击这些信息的时候触发的事件
polyline="{{polyline}}"
bindregionchange="regionchange"
show-location //显示位置
style="width: 100%;
height: 300px;"></map>
放入到wxml中，在map.js中需要先获取当前位置的定位坐标
放在生命周期中：
Page({ data:{
longitude:0,
latitude:0,
controls:[ //页面中可以存在多个数组，多个控件，是通过id来区分的
{
id:'c01', //在控件点击事件回调会返回此id
position:{left:20,top:50,width:50,height:50}, //控件相对地图位置
clickable:true, //默认不可点击
iconPath:"/common/icon/all.png" //项目目录下的图片路径，支持本地路径、代码包路径
}
]，
markers:[
{
id:1, //marker 点击事件回调会返回此 id。建议为每个 marker 设置上 number 类型 id，保证更新 marker 时有更好的性能。
latitude:40.22077, //纬度范围值在-90-90之间
longitude:116.23128, //经度范围在-180-180之间
title:"16号看电影", //信息
iconPath:'/common/icon/all.png', //要显示的图标
width:50, //设置图标的大小
height:50
}
]
},
onLoad(){
this.getPostion()
wx.updateShareMenu({ //设置分享
withShareTicket: true,
success (res) {
console.log(res)
},
fail(err){
console.log(err)
}
})
},
getPostion(){
wx.getLocation({
type:'wgs84',
success(res){ //成功的回掉函数
const latitude=res.latitude
const longitude=res.longitude
this.setData({ latitude, longitude})
}
})
},
controltap(e){
console.log('控件被点击了',e)
if (e.controlId=='c01'){ //在这里通过id来区分是哪一个控件进行判断，然后重新调用下 this.getPostion()这个方法就可以了,如果说页面的数据比较多的情况下过滤数据需要提前在markers中的数据加入type数据类型，然后对其进行判断即可
this.getPostion()
}else{
let result=this.data.markers.filter((item)=>{
return item.type=='food'
})
this.setData({markers:result})
}
}，
markertap(e){
console.log(e)
}
})
网络请求
getNewData(){
let url:"网址" //请求的网址
wx.request({
url:url,
method:"post", //请求的方式
data:{}, //传参
success(res){ //成功的回调函数
console.log(res)
}
})
}
这里应该注意到的是请求的接口没有跨域，只需要在微信公众平台配置即可：
首页--开发--开发设置--服务器域名
在里面添加即可一个月只能添加5次，请求的时候不支持http的可以在开发工具 中的设置本地设置中勾选不效验合法域名即可
存值
setStorage(){
wx.setStorageSync('userInfo',{ user:123,arr:[1,2,3]})
},
取值
getStorage(){
let reuslt=wx.getStorageSync('userInfo')
console.log(reuslt)
},
清空
clearStorage(){
wx.clearStorageSync()
}
打开腾讯地图:wx.openLocation
openMap(){
wx.openLocation({
latitusde:44,
longitude:116, //当前默认的经纬度
fail(err){ //捕获错误
conosle.log(err)
}
})
}
选择位置:wx.chooseLocation
在使用选择位置之前需要提前设置分享页面（wx.updateShareMenu）api，在onLoad方法中，刚开始进入页面就要调用
clooseMap(){
wx.chooseLocation({
success:function(res){
console.log(res)
}
})
}
电话:wx.makePhoneCall
phone(){
wx.makePhoneCall({
phoneNumber:'12306'
})
}
扫码:wx.scanCode
参数： onlyFromCamera（是否只能从相机扫码，不允许从相册选择图片 ） scanType（扫码类型 ）
scanCode(){
wx.scanCode({
onlyFromCamera: true,
success (res) {
console.log(res)
}
})
}
