微信小程序

创建项目

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