小程序学习--1

小程序学习–1 开发工具、目录结构

简介

微信小程序就是一个类似 RN 的轮子，可以快速开发，有一定的适用场景，但是也有其局限性，
适合于 低频 但重要的需求

最新小程序从注册到使用流程

微信小程序提供了什么？

底层API 和 组件 微信小程序官方文档

开发工具的使用

点击下载官方小程序开发工具

安装后点击添加项目

选择无AppId(基本上不影响开发)

填写项目名称和项目目录，注：新建文件夹可以用来创建quick start 项目，直接引入已经开发过的文件夹，可以用来打开别的小程序项目

其他开发工具

个人感觉官方的小程序开发工具不太好用（用完之后还关不了），所以找了一下替代工具，sublime text 3和atom 虽然都有插件，但是用起来还是不顺手，最后找到了这个Egret Wing

这个IDE提供了对微信小程序所有文件类型的支持，包括代码提示和语法高亮，也可以自定义主题，更关键的是可以，实时预览应用，但是不知道什么原因，在集成在IDE 的控制台中，没有输出调试信息，点击调试，会打开小程序的官方开发工具，然后就卡住了…，所以，本人会手动将Egret Wing 和小程序开发工具都开启，这样在IDE中修改后保存，在官方开发工具中会自动刷新。

目录结构简介

App 跟 Page 的关系是，App在整个小程序中只能有一个，但小程序中可以有多个页面，也就是多个Page,页面相关的文件都放在根目录下的pages目录，每个页面由四类文件组成，名字要相同，xxx.js / xxx.wxml / xxx.wxss / xxx.json

1.目录最外层的 app.js app.json app.wxss

1.app.js 应用的入口

2.app.json 针对微信小程序的全局配置，主要包含以下几个配置

• pages ：页面路径的数组，表示小程序要加载的所有页面，其中数组的第一项代表小程序的初始页面

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

• window : 设置小程序的状态栏、导航条、标题、以及窗口背景颜色

{
  "window":{
    "navigationBarBackgroundColor": "#ffffff",  // 导航栏背景颜色
    "navigationBarTextStyle": "black",          // 导航栏标题颜色，仅支持 black/white
    "navigationBarTitleText": "title",  // 导航栏标题文字内容
    "backgroundColor": "#eeeeee",       // 窗口的背景色
    "backgroundTextStyle": "light",     // 下拉背景字体、loading 图的样式，仅支持 dark/light
    "enablePullDownRefresh": "false"    // 是否开启下拉刷新
  }
}

• tabBar : 用于页面切换，适用于常规的Tab应用，可置于顶部或者底部，是一个数组只支持2-5个tab

{
   "tabBar": {
    "color": "#fff",              // tab 上的文字默认颜色
    "selectedColor": "#fff",      // 文字选中时的颜色
    "backgroundColor": "#000",    // tab 的背景色
    "borderStyle": "white",       // tabbar上边框的颜色， 仅支持 black/white
    "position": "bottom",         // tabbar的位置，可选值 bottom、top
    "list": [{
      "pagePath": "pages/index/index", // 页面路径，必须在 pages 中先定义
      "text": "首页",                   // tab 上按钮文字
      "iconPath": "img/a.png",         // 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px
      "selectedIconPath": "img/b.png"  // 选中时的图片路径
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "img/a.png",
      "selectedIconPath": "img/b.png"
    }]
  },
}

• networkTimeout : 配置小程序网络请求的超时时间

{
  "networkTimeout": {
    "request" : 6000,       // wx.request的超时时间，单位毫秒，默认为：60000
    "connectSocket": 6000,  // wx.connectSocket的超时时间，单位毫秒，默认为：60000
    "uploadFile": 6000,     // wx.uploadFile的超时时间，单位毫秒，默认为：60000
    "downloadFile": 6000    // wx.downloadFile的超时时间，单位毫秒，默认为：60000
  }
}

• debug : 调试模式开关，开发时开启，发布时关闭

{
  "debug": true
}

3.app.wxss 全局样式文件

2.pages文件夹

pages文件夹下有很多其他文件夹，每个文件夹代表一个页面的内容，每个页面的内容包含以下文件

1.page.json 页面配置文件

每个页面可以单独配置 page.json 他会覆盖 app.json中的配置，只对当前页面生效

2.page.wxml 页面的布局文件，作用相当于 HTML 文件，但是标签不相同，xx.wxml 文件中的标签同时还代表组件

3.page.wxss 页面的样式文件，类似于 CSS 文件， 语法上基本一致 但是 有些选择器不能使用了

4.page.js 页面的功能、数据都写在这里边了，写法上类似 Vue.js

3. app.js 中的写法

App() 小程序的注册入口，全局唯一

// 注册微信小程序，全局只有一个
let appConfig = {
    data: {},   // page页的数据
    // 小程序生命周期的各个阶段
    onLaunch : function () {},
    onShow : function () {},
    onHide : function () {},
    onError : function () {},

    // 自定义函数或者属性

};
App(appConfig);

// 其他位置引用
const app = getApp();

4. page.js

Page() 页面注册入口

写法上类似App()入口注册，用来注册一个页面，维护该页面的生命周期及数据

let pageConfig = {
    data : {},
    // 页面生命周期的各个阶段
    onLoad : function () {},
    onShow : function () {},
    onReady : function () {},
    onHide : function () {},
    onUnload : function () {},
    onPullDownRefresh : function () {},
    onReachBottom : function () {},
    onShareAppMessage : function () {},

    // 自定义函数或者属性
};
Page(pageConfig);

// 获取页面堆栈，表示历史访问过的页面，最后一个元素为当前页面
const page = getCurrentPages();

小程序的生命周期

1.前台和后台 ： 小程序处于最顶层的时候是前台（也就是正在使用），当有其他任务时处于后台（也就是在接入电话等时候）

2.app 的生命周期

// app.js
App({
  onLaunch: function () {
    // app 启动
    console.log('App onLaunch');
  },
  onShow: function () {
    // app 显示
    console.log('App onShow');
  },
  onHide: function () {
    // app 到后台
    console.log('App onHide');
  }
})

3.page 的生命周期

Page({
  data:{
    text:"Page login"
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数,装载页面
    console.log('---index---onLoad---');
  },
  onReady:function(){
    // 页面渲染完成
    console.log('---index---onReady---');    
  },
  onShow:function(){
    // 页面显示
    console.log('---index---onShow---');    
  },
  onHide:function(){
    // 页面隐藏
    console.log('---index---onHide---');   
  },
  onUnload:function(){
    // 页面关闭，页面卸载
    console.log('---index---onUnload---');    
  },
  itemClick: function () {
    console.log('item is click');
    // 跳转页面,上一个页面执行onHide，可以返回
    wx.navigateTo({
      url:"../logs/logs?id=1" // 向下一个页面传递数据
    })
    // 第二种跳转，上一个页面执行onUnload,不可以返回
    // wx.redirectTo({
    //   url:"../logs/logs"
    // })
    // 跳转到Tab页面
    // wx.switchTab({
    //   url:"../logs/logs" 
    // })
  }
})

页面跳转

• 1.wx.navigateTo({url:”“}) : 保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面（最多能够打开五个页面）

• 2.wx.redirectTo({url:”“}) : 关闭当前页面，跳转到应用的某个页面

• 3.wx.switchTab() : 跳转到tabBar页面，并关闭其他所有非tabBar页面

• 4.wx.navigateback(delta:1) : 关闭当前页面，返回上一级或者多级页面，可以通过getCurrentPages()获取当前页面栈，决定要返回第几层

• 5.组件 navigator : 页面链接

wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面，只能用 wx.switchTab 跳转到 tabbar 页面

下一篇 视图层与组件