小程序开发，导航栏样式的学习平台

指南：

小程序宿主环境

程序与页面

app.json的pages字段，可以知道当前小程序的所有页面路径。

{
  "pages": ["pages/index/index", "pages/logs/logs"]
}

这个配置说明在项目里定义了两个页面，字段的第一个页面是小程序的首页。

小程序启动后，app.js的APP实例，它里面的onLaunch的回调会被执行。

App({
  onLaunch() {
    // 小程序启动之后 触发
  }
})

 

 

看看小程序的一个页面是怎么写的，

首先，.json文件配置生成一个界面，接着，装载这个页面的WXML和WXSS文件，最后装载js文件。

js文件是由页面构造器Page（）生成，里面是各种对象，默认的是data对象和onLoad方法。

 

 

组件

通过写组件标签名显示组件。

在组件里写明属性传值，也可以写事件函数，来处理相关行为。

<map bindmarkertap="markertap" longitude="广州经度" latitude="广州纬度"></map>

 

bindmarkertap就是一个事件，后面两个是属性。

 

API

微信小程序提供了很多内置的API。比如调用微信扫一扫功能，

wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})

 

多数API的回调都是异步的，这句话其实我并不明白。

 

二、目录结构

3+4模式

主题3个文件，页面4个文件

 

三、配置小程序

全局配置

app.json文件进行全局配置，包括页面的路径、窗口表现、设置网络超时时间、多tab等。里面的window项，每个页面的json文件里也会有这一项。

{
   "window": {
    "navigationBarTitleText": "Demo"
  },
}

  

页面配置

每个小程序页面使用同名.json文件对页面窗口进行配置，页面的配置项会覆盖app.json中window同名的配置项。

 

sitemap配置

微信索引，这个我不明白。

 

四、小程序框架

（1）场景值

用来描述用户进入小程序的路径，比如有的是通过一个链接进来的，有的是通过扫某个二维码进来的，有的是通过聊天会话里的小程序卡片进来的。总之，进来的方式是不一样的。

获取场景值的方法，APP的onLaunch和onShow，或者wx.getLaunchOptionsSync中获取场景值。

只有概念，怎么没看见使用呢？不明白。

 

（2）逻辑层

注册小程序

小程序在app.js文件中调用APP方法注册小程序实例，生命周期、错误监听都放在这里面。

注意是app.js文件，不是每个页面的js文件。

整个小程序只有一个APP实例，是全局页面共享的。开发者通过getApp方法获取全局唯一的App实例。

//某个页面的js文件
const appInstance=getApp();
console.log(appInstance.globalData);

  

注册页面

小程序中的每个页面，都要在页面对应的js文件中调用Page方法注册页面实例，制定页面的初始数据、生命周期回调、事件处理等。

总结：最大的总体的注册，在app.js文件里，使用的是App实例。app.json文件里，装的是路径。每个页面的注册，则是在页面的js文件里，使用的是Page实例，里面装的是data和生命周期。除了Page，页面也可以像自定义组件使用Component来创建，比如弹出来的选择框页面，就是用组件来写的。

 

Page实例（页面）生命周期

onLoad、onShow。

 

页面路由

通过getCurrentPages函数获取当前页面栈。这句话不明白。

总之，该模块内容是实现页面跳转的。他们的每一次动作，都是与生命周期息息相关的。

wx.navigateTo:打开新页面

wx.navigateBack:返回页面

wx.switchTab：tab切换

 

模块化

模块只有通过module.exports或者exports才能对外暴露接口。推荐前者，因为我不明白两者的关系。

在需要使用这些模块的文件中，使用require将公共代码引入。

const common = require('common.js');

  

文件作用域

在js文件中生命的变量和函数只在该文件中有效，不同的文件中同名的变量和方法并不会影响。

如果需要全局的数据，可以在app.js文件中的App中设置。getApp方法可以获取全局的应用实例。

 

API

API有事件监听API、同步API和异步API三大类。

异步API：

大多数API都是异步的，wx.request/wx.login等。这类接口要接收一个Object类型的参数，这个参数有以下几个参数：success、fail、complete（无论成功失败都会执行）。

wx.login({
  success(res) {
    console.log(res.code)
  }
})

 对象里面有success参数，这个参数是一个函数，这个函数接受一个res参数。

  

（3）视图层

 基础组件

一个组件包括标签、属性和内容。左右组件与属性都是小写，以“-”连接。组件常见的公共属性有id、class、style、hidden、data-*（组件上触发事件时，会发送给时间处理函数，注意是currentTarget才会触发）、bind*、catch*（事件）。

 

获取节点信息

通过节点createSelectorQuery信息查询API获取节点属性、样式、位置。最常见的用法是使用这个接口来查询某个节点的当前位置。

const query = wx.createSelectorQuery();

   

五、小程序运行时

 JS支持情况

不支持动态执行JS代码，不明白这句话，但接下来他说了，也就是不支持使用new Function创建函数

 

运行机制

冷启动和热启动。

 

六、自定义组件

创建自定义组件

自定义组件类似于页面，由4个文件组成，同样也是wxss文件，不是wxs文件。要创建一个自定义组件，首先在json文件中进行自定义组件生命，就是将组件阻断市值为true。然后，在wxml文件里写模板。最后，在wxss文件里写样式。但是wxss文件里面，不能使用id、属性选择器。

【为什么这里跟微信开放社区的文档有冲突？开放社区里明确说明，wxss文件可以使用id选择器。是不是我看的版本不对？不明白】

{
  "component": true
}

 在js文件中，使用Component来注册组件，并提供组件的属性和方法。

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod() {}
  }
})

使用自定义组件

在页面的json文件中进行引用声明，里面放的是路径。

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

 

为什么我没有在小程序中看到json文件引用组件的声明？不明白。

 

（1）组件模板和样式

组件模板

<slot>节点，用来承载组件引用时提供的子节点。

 

模板数据绑定

向子组件属性传递动态数据

 

（2）Component构造器

构造器用于定义组件，可以指定组件的属性、数据、方法等。

 

使用Component构造器构造页面，小程序的页面也可以视为自定义组件，但是要求对应json文件中包含usingComponents定义段。

 

转载于:https://www.cnblogs.com/qingshanyici/p/10784117.html