app.json

app.json配置文件app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、窗口外观、界面表现、底部tab 等。Demo 项目里边的 app.json 配置内容如下：

pages ：用来记录当前小程序所有页面的路径 window ：全局定义小程序所有页面的背景色、文字颜色等 style ：全局定义小程序组件所使用的样式版本

sitemapLocation ：用来指明 sitemap.json 的位置 usingComponents : 全局自定义组件

project.config.json 配置文件

project.config.json 是项目配置文件，用来记录我们对小程序开发工具所做的个性化配置 setting保存了编译相关的配置 projectname保存的是项目名称 appid保存的是小程序的账号 ID 同学们这里需要将 project.config.json 和 app.json 配置文件的作用区分开来, project.config.json 更多的是对微信开发者工具的配置, 而 app.json 是对项目代码功能层面上的配置.

sitemap.json 配置文件-是否被索引

微信现已开放小程序内搜索，效果类似于 PC 网页的 SEO 。 sitemap.json 文件用来配置小程序页面是否允许微信索引。

当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。

默认开启-可关闭

注意： sitemap 的索引提示是默认开启的，如需要关闭 sitemap 的索引提示，可在小程序项目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 为 false

页面的 .json 配置文件

小程序中的每一个页面，可以使用 .json 文件来对本页面的窗口外观进行配置，页面中的配置项会覆盖 app.json 的 window 中相同的配置项, 当然, 这指的是当前页面被展示出来的时候

常用组件

view text image

常用事件

在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event （一般简写成 e ）来接收,

注意,事件处理函数需要和 data 平级

<button bindtap="事件名">点我试试</button>

在js 中访问 data 中的数据

在 js 代码中, 如果想要访问 data中的数据, 是通过 this.data.xxx 的方式进行访

js 中修改 data 中的数据

通过调用 this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值，示例如下：

onAddHandle: function () { 
    this.setData({ 
    count: this.data.count + 1 // 在原来值基础上+1 
    })
}

事件传参

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。

传参

<button bindtap="onBtnString" data-info="2">事件传参-拼接字符串</button>
最终：
info 会作为名字存储在事件对象的 target 中的 dataset 中, 2 会被解析为值
在事件处理函数中，通过 event.target.dataset.info 即可获取到值，示例代码如下：
// 事件传参-拼接字符串 
onBtnString (e) {
    this.setData({ // this.data.count就是旧值 
    count: this.data.count + e.target.dataset.info 
    }) 
}

bindinput 的使用-双向绑定

<input value="{{ msg }}" bindinput="inputHandle" class="ipt2" type="checkbox"></input>

// 实现input的数据和data数据同步 
inputHandle(e) { 
        this.setData({ 
        msg: e.detail.value 
        })
     }

条件渲染 v-if

wx:if wx:else-if wx:else 条件渲染

<!-- wx:if wx:else-if wx:else 条件渲染 --> 
<view wx:if="{{ type === 1 }}" class="text">男</view>
<view wx:elif="{{ type === 2 }}" class="text">女</view>
<view wx:else>保密</view>

wx:if 与 hidden 的对比

① 运行方式不同

wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏 hidden 以切换样式的方式（ display: none/block; ），控制元素的显示与隐藏

② 使用建议

频繁切换时，建议使用 hidden 控制条件复杂时，建议使用 wx:if 搭配 wx:elif 、 wx:else 进行展示与隐藏的切换

样式导入

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。

@import "/icon/icon.wxss";

tabBar

tabBar tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：

底部 tabBar

顶部 tabBar

注意：

tabBar 中只能配置最少 2 个、最多 5 个 tab 页签当渲染顶部 tabBar 时，不显示 icon ，只显示文本

 "tabBar": {
    "selectedColor": "#C00000",
    "list": [{
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "static/tab_icons/home.png",
        "selectedIconPath": "static/tab_icons/home-active.png"
      }
    ]
  },

网络数据请求

onTapGet () {
        wx.request({ 
            // 请求地址，必须是以https://开头 // 必须是配置在request合法域名 
            url: 'https://www.escook.cn/api/get', 
            // 请求方式 
            method: 'GET', 
            // 请求参数 
            data: { name: 'zs', age: 22 },
            // 请求成功的回调 
            success: (res) => { 
                console.log(res) 
                }     
           })

        <!--编程式导航 跳转至tabBar页面 --> 
    <button bindtap="gotoMessage">跳转到messae页面</button> 
    /*通过编程式导航 跳转至tabBar页面 message页面 */
    gotoMessage () { 
        wx.switchTab({ 
        // 代表要跳转的路径 
        url: '/pages/message/message', 
        }) 
    },

跳转至非 tabBar页面

        <!-- 编程式导航 跳转至非 tabBar页面 --> 
        <button bindtap="gotoInfo">跳转到Info页面</button> 
                /*通过编程式导航 跳转至非tabBar页面 Info页面 */
            gotoInfo () {
                wx.navigateTo({
                url: '/pages/info/info',
        }) 
       },

后退导航

调用 wx.navigateBack(Object object) 方法，可以返回上一页面或多级页面。

后退事件

            tabBar 页面是不能实现后退的效果的
        goBack () { 
                //如果不传递参数就是返回上一页 
                // 如果要传递参数则是传递 delta数字型， 代表返回的层级。 
                wx.navigateBack() 
            },

注意 tabBar 页面是不能实现后退的效果的. 因为, 当我们跳转到 tabBar 页面，会关闭其他所有非 tabBar 页面,所以当处于 tabBar 页面时, 无页面可退

wxs

语法参考 es5 js语法为了降低 wxs （ WeiXin Script ）的学习成本， wxs 语言在设计时借大量鉴了 JavaScript 的语法。但是本质上， wxs 和 JavaScript 是完全不同的两种语言！

外联的方法

// 1.定义方法 
        function toLower(str) { 
            return str.toLowerCase() 
            }
            // 2.暴露成员 
        module.exports = { 
            toLower: toLower 
            }

<!-- 1.使用外联式引入外部的wxs文件 --> 
        <wxs module="m2" src="../../utils/tools.wxs"></wxs>
       使用 <view>{{ m2.toLower(country) }}</view>

组件

① 在项目的根目录中，鼠标右键，创建 components -> test 文件夹

② 在新建的 components -> test 文件夹上，鼠标右键，点击“新建 Component ”

③ 键入组件的名称之后回车，会自动生成组件对应的 4 个文件，后缀名分别为 .js ， .json ， .wxml 和 .wxss

注意：为了保证目录结构的清晰，建议把不同的组件，存放到单独目录中.

局部引用

在页面的 .json 配置文件中引用组件的方式，叫做“局部引用”。示例代码如下：

{ 
        "usingComponents": { 
        "my-test1": "/components/test/test" 
    } 
}

全局引用

在 app.json 全局配置文件中引用组件的方式，叫做“全局引用”。

示例代码如下：

"usingComponents": { 
    "my-test2": "/components/test2/test2" 
    }

注意事项

默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的 UI 结构组件样式的隔离性的好处有：

① 防止外界的样式影响组件内部的样式

② 防止组件的样式破坏外界的样式 app.wxss 中的全局样式对组件无效

只有 class 选择器会有样式隔离效果， id 选择器、属性选择器、标签选择器不受样式隔离的影响

有时，我们希望在外界能够控制组件内部的样式，此时，可以通过 styleIsolation 修改组件的样式隔离选项，用法如下

// 在组件的.js 文件中新增加如下配置 
        Component({ 
            options: { 
            // 默认值isolated: 代表启动样式隔离 
            //apply-shared: 代表页面wxss样式将影响自定义组件 
            //shared: 代表双向的影响 s
            tyleIsolation: 'isolated'
            }
       })
            
            // 或在组件的.json 文件中新增加如下配置 
            { 
                "styleIsolation": "isolated" 
              }

properties 属性

properties: { 


      // 完整定义 属性的方式【当需要指定属性默认值时，建议使用此方式】 
        max: {// 属性值的数据类型 
            type: Number, // 属性值的默认值 
            value: 10 },
            
            
      // 简化定义 属性的方式 
            max: Number 
            }

数据监听器

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。

它的作用类似于 vue 中的 watch 侦听器。

在小程序组件中,数据监听器的基本语法格式如下：

Components({ // observers: 观察者 
        observers: { 
            '字段A， 字段B': function(字段A的新值， 字段B的新值) { 
            // do something 
            } 
})

通配符方式, 监听对象中所有属性的变化

observers: { 
        '_rgb.**': function (obj) { 
            this.setData({ 
                fullColor:`${obj.r}, ${obj.g}, ${obj.b}`
            }) 
    }
}

纯数据字段

纯数据字段指的是那些不用于界面渲染的 data 字段。在 Component 构造器的 options 节点中，指定 pureDataPattern 为一个正则表达式，字段名符合这个正则

Component({ 
    options: { // 指定所有_开头的数据字段为 纯数据字段 
        pureDataPattern: /^_/ },

    data: { 
        a: true, // 普通数据字段 
        _b: true // 纯数据字段 } })

父子兄弟传值

父传子

父

<my-text name='{{name}}'>

子

  properties: {
    name: String,
  },

子传父

父

 methods: {
    age() {
      this.triggerEvent('sync', {
        value: this.data.age
      })
    }
  }

子

<my-text bind:sync="addAge">

addAge(e) {
    this.setData({
      age: e.detail.value
    })
  },

兄弟传值

可在父组件里调用 this.selectComponent("id或class选择器") ，获取子组件的实例对象，从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器，例如 this.selectComponent(".my-component") 。

父组件的wxml文件

使用 bind:自定义事件名称（推荐: 结构清晰
<my-test class="cusstomA" id="cA" count="{{count}}
"bind:sync="syncCount"></my-test>
<button bindtap="getChild">获取子组件实例</button>
//父组件的js文件 按钮的tap事件处理函数
getChild() {
// 切记下面的参数不能传递标签选择器，不然返回的是null
// 也可以传递ID选择器
const child = this.selectComponent('.customA')
// 调用子组件的setData方法，修改count的值，
child.setData({ count: this.data.count + 1 })
child.addCount() // 直接调用子组件的addCount方法，该方法在child实例对象的__proto__上可以访问到该方法

}

// 这里的代码其实有点问题, 因为count的数据是属于父组件的, 并且由父组件通过自定义属性传递

给了子组件, 如果想修改这个count的值, 直接在父组件中修改即可, 子组件自动就能更新

.

完全没有

必要再这种场景下去修改子组件中count的值

微信小程序