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

安装工具

https://developers.weixin.qq....
打开链接下载小程序云开发

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....

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"
  }
})

渲染出来的结果

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('小程序启动完毕')
  }
})

上方进行了一次回调

小程序的页面

一个页面有四个文件,分别是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,达到生成地图的目的。

api 实现调用api的能力

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

发布者-订阅模型

小程序的逻辑层

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

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

注册程序

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

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

onLaunch

代码如下

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

效果如下
微信小程序初步入坑指南-脚本宝典
即获取页面的参数

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

getAPP

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

注册页面

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

data

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

onLoad

进行参数的传值

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)
  }

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

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

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

  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>

路由

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

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包

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

ps 貌似有个小坑。

本文固定链接: http://www.js-code.com/weixin/weixin_45993.html