怎么关闭微信开发工具的定位

表单组件

input输入框/radio/radio-group单选项目及组\checkbox/checkbox-group多选项目及组\switch开关选择器\button按钮组件\form表单组件

代码案例

wxml

<view class="container">
<form bindsubmit="_formSubmit" bindreset="">
    <view class="title">姓名：</view>
<input name="username" type="text" confirm-type="send" value="123" placeholder="姓名" />
    <view class="title">密码</view>
    <input type="text" name="password" maxlength="-1" password="{{ true }}" placeholder="密码" />
    <view class="title">性别：</view>
    <radio-group bindchange="_radioChange" name="sex">
        <radio value="m" checked="{{ true }}">男</radio>
        <radio value="w" disabled="{{ true }}">女</radio>
        <radio value="b" color="#f00">保密</radio>
    </radio-group>
    <view class="title">爱好：</view>
    <checkbox-group bindchange="_checkboxChange" name="hobby">
        <checkbox value="xx" checked="{{ true }}">学习</checkbox>
        <checkbox  value="yd" color="red">运动</checkbox>
        <checkbox value="yx">游戏</checkbox>
    </checkbox-group>
    <view class="title">联系地址:{{ region }}</view>
    <picker mode="region" name="region" value="{{ region }}" bindchange="_regionChange">
        请选择：
    </picker>
    <!-- <picker mode="selector" range="{{ arr }}">
        请选择：
    </picker> -->
    <!-- <picker mode="selector" value="1" range="{{ brr }}" range-key="name">
        请选择：
    </picker> -->
    <view class="title">是否同意:</view>
    <switch bindchange="_swicthChange" type="checkbox" disabled="{{ false }}"></switch>
    
    <!-- <button type="primary" bindtap="submit">提交</button> -->
    <!-- <button type="primary" bindtap="_search">搜索</button> -->
    <button type="primary" form-type="submit">提交</button>
    <button type="warn" form-type="reset">重置</button>
</form>
</view>

<!--  小程序的简易的双向绑定:model:value="{{ keywords }}" -->
<!-- <input type="text" value="{{ obj.keywords }}" bindinput="_input" placeholder="关键字搜索" /> -->
<!-- 支持 -->
<!-- <input type="text" model:value="{{ keywords }}" placeholder="关键字搜索" /> -->
<!-- 不支持 -->
<!-- <input type="text" model:value="{{ obj.keywords }}" placeholder="关键字搜索" /> -->

js：

// pages/form/form.js
Page({
    data:{
        keywords:"", //  {}
        obj:{
            keywords:""
        },
        switchStatus:false,
        arr:["张三","李四","王五"],
        brr:[
            {
                id:1,
                name:"鲁班"
            },
            {
                id:2,
                name:"香香"
            }
        ],
        region:[]
    },
    _input(e){
        // console.log(e.detail.value)
        // this.data.obj.keywords = e.detail.value;
        this.setData({
            obj:{
                keywords: e.detail.value
            } 
        })
    },
    _search(){
        var keywords = this.data.keywords;
        console.log(keywords)
    },
    _radioChange(e){
        console.log(e.detail)
    },
    _checkboxChange(e){
        console.log(e.detail)
    },
    submit(){
        if(!this.data.switchStatus){
            wx.showToast({
              title: '请勾选同意',
              icon:"none"
            })
            return;
        }

        console.log("正常获取表单信息")
    },
    _swicthChange(e){
        // console.log(e.detail)
        this.data.switchStatus = e.detail.value;
    },
    _regionChange(e){
        // console.log(e)
        this.setData({
            region:e.detail.value
        })
    },
    _formSubmit(e){
        if(!this.data.switchStatus){
            wx.showToast({
              title: '请勾选同意',
              icon:"none"
            })
            return;
        }

        console.log(e)
    }
   
})

form表单总结

实现表单提交：
1.给button添加form-type为submit属性
2.给form表单组件添加bindsubmit事件
3.给每一个表单组件添加name作为key

导航

导航组件（声明式导航）

1.使用组件形式进行跳转页面  (声明式)
    open-type：
        普通页面：
            navigate：（默认值）保留当前页面，跳转到指定页面，不能跳转tab页面
            redirect：关闭当前页面，跳转到指定页面，不能跳转tab页面
        tab页面：
            switchTab：关闭其他非tab页面，跳转到指定的tab页面
            reLaunch:关闭其他页面， 跳转到任何的指定页面；
         后退：   
            navigateBack

导航到普通页面

<navigator url="../test/test"  open-type="navigate">
<button>跳转页面-普通页面test</button>
 </navigator>
 <!-- <navigator url="../test/test"  open-type="redirect">
    <button>跳转页面-普通页面test</button>
 </navigator> -->
 <navigator url="../test/test"  open-type="reLaunch">
    <button>跳转页面-普通页面-test</button>
 </navigator>

后退导航

<navigator open-type="navigateBack" delta="1">
    <button>back</button>
</navigator>

导航到tab页面

<navigator url="../cart/cart"  open-type="switchTab">
    <button>跳转页面-tab页面-cart</button>
 </navigator>
<navigator url="../cart/cart"  open-type="reLaunch">
    <button>跳转页面-tab页面-cart</button>
 </navigator>

路由API（编程式导航）

导航到普通页面

后退导航

导航到tab页面

toPage() {
        // 跳转页面
        // wx.navigateTo({
        //   url: '../test/test',
        // //   success(){
        // //   }
        // })

        // wx.redirectTo({
        //     url: '../test/test',
        // })

        // wx.switchTab({
        //   url: '../cart/cart',
        // })

        wx.reLaunch({
          url: '../cart/cart',
        })
    }

导航传参

传递参数

<navigator url="../test/test?id=10&name=lisi"  open-type="navigate">
    <button>跳转页面-普通页面test</button>
 </navigator>

toPage(){
		wx.reLaunch({
          url: '../cart/cart?id=99',
        })
}

接参

Page({
    onLoad(option){
        console.log(option)
    }
})

说明：可以在微信开发者工具选择普通编译–继续选择添加编译模式–选择启动页面–添加启动参数即可，然后即可在当前目标页面的onLoad中获取参数

跳转其他小程序

wx8fc369471215e8ae

<navigator target="miniProgram" version="release" app-id="wx8fc369471215e8ae">
    <button>跳转到其他小程序</button>
  </navigator>

自定义组件

概述

小程序支持简洁的组件化编程，开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；自定义组件在使用时与基础组件非常相似

创建自定义组件

自定义组件 vs 传统的页面page

【com】.wxml   与页面page的页面wxml完全一致
【com】.wxss   与页面page的页面wxss保持一致； 建议使用class选择器；
【com】.json   比页面json文件多了"component": true,
		{
            "component": true,
            "usingComponents": {}
        }
【com】.js    与页面js相比，将page构造器切换成component构造器

组件引用与使用

局部引用

在每一个页面的json文件中进行注册

{
  "usingComponents": {
    "my-btn":"../../components/mybtn/mybtn"
  }
}

全局引用

在app.json中进行注册

{
  "usingComponents": {
    "my-btn":"./components/mybtn/mybtn"
  }
}

页面使用

<my-btn></my-btn>

组件样式

自定义组件建议使用class类选择器，其他的完全参考页面的wxss操作

数据与方法

初始化数据

<view>msg:{{ msg }}</view>
<button bindtap="click">事件</button>

// components/mybtn/mybtn.js
Component({
    /** 组件的属性列表--对外开放属性 */
    properties: {
    },

    /*** 组件的初始数据-私有属性*/
    data: {
        msg:"data数据"
    },
    
    /** * 组件的方法列表--私有事件*/
    methods: {
        click(){
            // console.log('click')
            var msg = this.data.msg;
            // console.log(msg)
            this.setData({
                msg:"newData数据"
            })
        }
    }
})

properties组件对外开放属性

组件的对外属性，用来接收外界传递到组件中的数据,组件的 properties 和 data 的用法类似，它们都是可读可写的，只不过：

• data 更倾向于存储组件的私有数据
• properties 更倾向于存储外界传递到组件中的数据

properties属性不需要在自定义组件内部进行修改，是通过组件调用时传递进来的

properties语法结构：

属性名称:{
	type：String，NUmber，【null不限制数据类型】
	value:""//这里要有初始默认值
}

组件内定义：

wxml

<view class="{{ size }}" style="background-color:{{ type }}">
</view>

js

COMPONENT({
     properties: {
        size:{
            type:String,
            value:"default"
        },
        type:{
            type:String,
            value:"#fff"
        }
    },
})

页面使用：

<!-- 
    1.使用自定义组件
        mybtn
    属性          默认值        说明            取值
    size          default      按钮的大小       mini
    type          #fff         按钮颜色         不限制
    bindclick     事件         按钮点击事件  =
 -->
<my-btn size="mini"></my-btn>
<my-btn size="default" type="#f00"></my-btn>
<my-btn size="default" type="#ff0"></my-btn>

slot插槽使用

默认插槽

定义

<!-- 默认插槽 （单个） -->
<view class="{{ size }}" style="background-color:{{ type }}">
    <slot></slot>
</view>

页面使用

<!-- 单个插槽的使用 -->
<my-btn size="default" type="#ff0">
    提交
</my-btn>

多个插槽

配置：

Component({
    options:{
        multipleSlots:true, //  开启多个插槽使用配置,更新后好像不用了。
    },
})

定义：

<!-- 多个插槽 （单个） -->
<view class="{{ size }}" style="background-color:{{ type }}">
    <slot name="one"></slot>
    <slot></slot>
    <slot name="two"></slot>
</view>

页面使用

<my-btn size="default" type="#ff0">
    23456
    <!-- 提交 -->
    <view slot="one">one</view>
    <view slot="two">two</view>
</my-btn>

组件间通信与事件

概述：组件之间的三种基本通信方式
（1）WXML 数据绑定：用于父组件向子组件的指定属性传递数据，仅能设置 JSON 兼容数据
（2）事件：用于子组件向父组件传递数据，可以传递任意数据。
（3）父组件通过 this.selectComponent 方法获取子组件实例对象，便可以直接访问组件的任意数据和方法。

父组件向子组件传递数据

properties组件对外开放属性

子组件向父组件传递数据

this.triggerEvent(‘事件类型’,值，配置项) vs vue this.$emit(‘自定义事件名称’,事件参数)

（1）给自定义组件添加事件，同时使用triggerEvent进行监听

组件.wxml

<view class="{{ size }}" bindtap="comclick" style="background-color:{{ type }}">
    <slot></slot>
</view>

组件js

comclick(){
            var data = {
                value:{msg:this.data.msg}
            }
            this.triggerEvent("abc",data);
        }

父页面

<my-btn size="default" bindabc="click" type="#ff0">
    提交
</my-btn>

父js

Page({
    click(e){
        console.log(e)
    }
})

获取子组件实例对象

• this.selectComponent（子dom）

<!-- 通过获取子组件实例的方式获取子组件数据 -->
<my-btn size="default" id="mybtn" bindtap="comclick" type="#ff0">
    提交
</my-btn>

在页面的js中，使用 this.selectComponent（’选择器‘）

comclick(e){
    // console.log(e)
    var com = this.selectComponent("#mybtn");
    console.log(com.data.msg)
}

observers数据监听器

使用数据监听器

监听子数据字段

1)单一子数据字段

2)使用**通配符

observers:{
        "监听子数据字段 || **":function(data){
			console.log(data)
        },
    }

// components/mybtn/mybtn.js
Component({
    data: {
        msg:"data数据",
        numA:1,
        numB:2,
        sum:0,
        obj:{
            number:10,
            age:19
        }
    },
    //created(){},此时this上无setData。
    //在组件实例进入页面节点树时执行
    attached(){
        this.setData({
            sum:this.data.numA + this.data.numB
        })
    },
    // 数据监听
    observers:{
        "numA,numB":function(a,b){
            // console.log(a,b)
            this.setData({
                sum:a+b
            })
        },
        "obj.number":function(n){
            console.log(n)
        },
        "obj.**":function(obj){
            console.log(obj,'234567')
        },
        "**":function(data){
            console.log(data)
        }
    },
    methods: {
        change(){
            this.setData({
                numA:++this.data.numA,
                numB:++this.data.numB,
                obj:{
                    number:99
                }
            })
        }
    }
})

组件的生命周期

• 组件实例刚刚被创建好时， created 生命周期被触发。此时还不能调用 setData 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
• 在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化完毕。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
• 在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。

---

API

API概述

API（Application Programming Interface，应用程序接口）是一些预先定义的接口（函数），目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力。

小程序提供主要的API:小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。

api分类

缓存

(1)设置缓存

// 同步api
wx.setStorageSync('name', "admin")
// 异步api
wx.setStorage({
            key: "pass",
            data: "123",
            success(res) {
                console.log(res)
            }
        })

(2)获取缓存

// 1.同步获取
        try {
            var res = wx.getStorageSync('name');
        } catch (err) {
            console.log(err)
        }
        var res = await wx.getStorage({ key: "pass" })
        console.log(res)
// 2.异步
     //（1）callback形式
        wx.getStorage({
            key:"pass",
            success(res){
                console.log(res)
            },
            fail(){
            }
        })
     //（2）promise 
        wx.getStorage({
            key: "pass",
        }).then(res => {
            console.log(res)
        })

(3)删除缓存

// 1.使用同步删除
        wx.removeStorageSync('name');
        // 2.使用异步删除
        wx.removeStorage({
          key: 'pass',
        })

(4)清空缓存

wx.clearStorageSync();

网络

语法

wx.request({
            url:"",//服务器地址
            data:{},
            method:"",// get默认值
            header:{},
            timeout:6000,
            success:(res)=>{
                console.log(res)
            },
            fail(err){
                console.log(err)
            },
            complete(result){
                console.log(result)
            }
        })

get

post请求

wx.request({
            url:"http://localhost:3000/v1/login",//服务器地址
            data:{
                user:"admin",
                pass:123456
            },
            method:"post",// get默认值
            header:{
                "content-type":"application/json"
            },
            timeout:60000,
            success:(res)=>{
                console.log(res)
            }
            
        })