微信小程序初步入坑小指南

安装工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/beta.html
打开链接下载小程序云开发

app.json

为json格式的文件，为一个配置文件，属于全局的
初始化的文件内容

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

pages

各个参数的解释，pages为页面，每一次更改页面，增加或者新增加页面都需要修改pages参数。不需要加后缀名，微信框架会自动添加后缀名。

window

对于全局导航栏的设置。
navigationBarBackgroundColor 设置全局的导航栏的颜色
navigationBarTitleText 设置导航栏的文字内容
navigationStyle 设置导航栏的样式
backgroundColor 设置窗体的颜色，即下拉刷新透露出的颜色
即需要设置 "enablePullDownRefresh": true, 其布尔值为true即可进行漏出设置的窗体颜色。
backgroundTextStyle 设置下拉的loding样式

tabBar

是下方的导航栏的设置。这个直接看文档吧。。
https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

app.json文件如下

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#c7dbc8",
    "navigationBarTitleText": "小小",
    "navigationBarTextStyle":"whiter",
    "enablePullDownRefresh": true,
    "backgroundColor": "#fceaea"
  },
  "tabBar": {
    "list": [{
      "text": "ming",
      "pagePath": "pages/logs/logs"
    }, {
      "text":"home",
      "pagePath": "pages/index/index"
    }],
    "color": "#f8fcea",
    "backgroundColor": "#ff9999",
    "selectedColor": "#c5ff99",
    "borderStyle": "white",
    "position": "top"
  },
  "functionalPages": true
}

project.config.json

该文件为一个本地的配置文件
就是对于微信的一些设置

wxml模板

wxml ≈ html

感觉很像ejs，好吧

wxml中内容

<text>{{mesg}}</text>

在同路下的js文件中

Page({
  data: {
    msg: "hello world"
  }
})

渲染出来的结果

image

js交互

Page({
  data: {
    msg: "hello world"
  },
  clickMe: function() {
    this.setData({msg: "3333"});
  }
})

wxml

<text>{{msg}}</text>
<button bindtap="clickMe">点击按钮</button>

点击按钮将会自动更新页面的数据

小程序的启动

客户端打开小程序之前，会把小程序全部下载到本地。
通过app.json可以知道页面的启动地址。
小程序只有一个app的实例，全局共享。
启动完成后触发onLaunch事件，然后运行回调函数
在小程序启动完毕以后控制台输出内容

App({
  onLaunch: () => {
    console.log('小程序启动完毕')
  }
})

上方进行了一次回调

image

小程序的页面

一个页面有四个文件，分别是json(配置文件)，wxml（页面文件，类似于html），js文件（处理页面的相关交互，和网页类似）
js中有一个page，为一个页面的构造器，渲染页面的时候先装载json文件，配置当前的顶部导航，接着装载wxml文件，配置页面的DOM，在装载wxss，进行对页面样式的处理

和网页的类似，都是同样的

最后将会读取js文件，根据页面中的page函数即构造器中的内容，将wxml和data进行绑定，渲染出结果，为mvvm

mvc 分别是模型层，视图层，和控制器，当用户请求到达以后，将会先经过路由，即入口文件，即主文件中的server.js文件，接着进入lib目录下的route.js文件，对路由进行分发，路由在将数据传递给控制器，controller ，controller 收到请求以后再向model 索要数据，索要完成以后，在将数据导向view层，即ejs文件的地方，渲染完成文件以后返回给用户。

mvp 在mvc的基础上，view中不写逻辑，，在原先控制器的地方完成页面的合并

mvvm 和mvp类似，只不过view和原先的控制器双向绑定，即使用get 和 set方式，达到当数据更改的时候，进行回调

组件

是滴，小程序采用组件化，例如生成地图map即可

ps 在网页中，生成地图，需要引入第三方的js文件，以及第三方的api，达到生成地图的目的。

image

api 实现调用api的能力

api的回调为异步操作，所以呢，依旧要进行回调

发布者-订阅模型

image

小程序的逻辑层

小程序使用的是js引擎进行渲染，逻辑层将数据发送给视图层，视图层接受事件的反馈，开发者写的所有文件都会打包成为一份js文件，小程序运行时启动，小程序离开时销毁，

吐槽 一些浏览器里的js在微信小程序无法使用，小程序还有npm？ 天哪，

注册程序

app()函数，必须在app.js文件中调用，接受一个object的参数

前台后台定义，当用户点击左上角关闭的时候， 或者按住home离开微信，小程序，没有销毁，将会进入后台，再次打开进入前台，当小程序进入后台一段时间以后，系统资源占用过高将会不定时的销毁

onLaunch

代码如下

//app.js
App({
  onLaunch: (onlaunch) => {
    console.log(onlaunch)
  }
})

效果如下

image

即获取页面的参数

相比较网页好轻松，，网页还需要进行先字符串分隔，然后再次以=进行分隔，然后将其循环，遍历该数组，将其保存进入对象，完成。如果使用json字符串进行传，可能稍微方便一点

getAPP

getApp函数能获取小程序的各种函数，即onLaunch等其他的一些函数
即获取到小程序的一个实例

注册页面

page为一个构造函数，接受对象，用来对页面进行初始化

data

data和渲染层，进行数据的绑定

onLoad

进行参数的传值

image

Page({
  data: {
    msg: "hello world"
  },
  clickMe: function() {
    this.setData({msg: "3333"});
  },
  onLoad: (query) => {
    console.log(query);
  }
})

onShow

页面切入的时候，将会进行显示。
例： 按住home按键，在回到小程序界面的时候，将会回调该注册的函数

onReady

页面渲染完成以后，将会回调该函数

onHide

页面切换的时候，将会回调注册的函数

onUnload

页面卸载的时候，将会触发

页面事件

onPullDownRefresh

用户下拉，需要设置onReachBottomDistance，即用户下拉到页面底部多少的时候，触发该事件

onPageScroll

用户滑动的距离，没有正负之分

onShareAppMessage

用户转发的接口
在button组件中设置

open-type="share"

即可设置为转发按钮
需要有return进行返回参数

onTabItemTap

单击tab将会触发该内容

  onTabItemTap: (item)=>{
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  }

如果按住导航，将会进行输出

image

当单击组件的时候，发生事件

这一点终于和网页类似了。网页中也可以实现一个元素和事件进行相互的绑定

image

  viewTap: () => {
    console.log('您已经单击按钮')
  }

<button bindtap="viewTap">这是按钮</button>

Page.route

当前页面的路径，类似于网页的

window.location.href

可以获取到当前页面的url

  onShow: function() {
    console.log('页面进行显示切入前台');
    console.log(this.route);
  },

当用户切换tab的时候，将会立马输出当前页面的path值
其中this指代当前的page，因为是在一个page函数内部

Page.prototype.setData

为page的继承函数，将数据从逻辑层发送到视图层（异步），this.data的值，（同步
）

ps 单纯的改变this.data的值，不会起作用，因为页面已经渲染完成，需要进行发送到视图层，进行更新视图
ps 是的。小程序使用的就是mvvm

js

Page({
  data: {
    text0: "11111",
    text1: "22222",
    text2: "333333",
    text3: "444444"
  },
  changeText0: function() {
    this.setData({text0: "22222"})
  },
  changeText1: function () {
    this.setData({ text1: "33333" })
  },
  changeText2: function () {
    this.setData({ text2: "44444" })
  },
  changeText3: function () {
    this.setData({ text3: "55555" })
  },
})

wxml

<view>{{text0}}</view>
<button bindtap="changeText0">更改上方文字</button>
<view>{{text1}}</view>
<button bindtap="changeText1">更改上方文字</button>
<view>{{text2}}</view>
<button bindtap="changeText2">更改上方文字</button>
<view>{{text3}}</view>
<button bindtap="changeText3">更改上方文字</button>

image

路由

小程序中的路由是有框架达到的
框架用栈的方式维护了当前的所有页面

ps 又见到栈了

getCurrentPages

该函数用于获取当前页面的栈，返回的是一个数组
适用于获取上一个返回的页面

全局变量

js文件中声明的变量，和函数只在文件中有用，不同文件可以声明相同的

ps 如果加载到一个页面的时候，将会发生命名冲突

可以在app.js文件中设置全局的数据

// a.js
var app = getApp();
console.log(app.globalData)

//app.js
App({
  onLaunch: (onlaunch) => {
    console.log(onlaunch)
  },
  globalData: 333
})

模块化

类似于node.js的包
使用的同样是exports进行接口的暴露

是滴，类比node.js即可，是滴，小程序还不支持引入npm包

image

然后就可以欢快的引入npm包了。

ps 貌似有个小坑。

image