微信小程序初步入坑指南

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

安装工具

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

渲染出来的结果

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 貌似有个小坑。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏搞前端的李蚊子

vue -- v-cloak解决刷新或者加载出现闪烁(显示变量)

在使用vue绑定数据的时候,渲染页面时会出现变量闪烁,例如 <div class="#app"> <p>{{value.name}}</p> </div...

4469
来自专栏美奔科技

向Windows 服务器传输大文件

https://support.microsoft.com/zh-cn/help/2258090/copying-files-larger-than-2-gb-...

7202
来自专栏CDA数据分析师

让你效率提高300%的Excel键盘技巧

本文为简书作者傲看今朝原创,CDA数据分析师已获得授权 刚进惠普的时候,听说公司里的某个领导操作Excel从不用鼠标,感觉真是太牛逼了,满是崇拜的眼神。然而经过...

2098
来自专栏前端新视界

构建通用的 React 和 Node 应用

原文:Build a universal React and Node App 演示:https://judo-heroes.herokuapp.com/ 译者...

3137
来自专栏Crossin的编程教室

在 Win 控制台中实现菜单

本教室的 hymyg 同学实现了两个控制台下的实用模块,发在了论坛上。我觉得挺不错的,于是分享其中的一个给大家。对项目感兴趣,想进一步了解细节的,可以在公众号里...

2825
来自专栏技术博客

ExtJs八(ExtJs Mvc创建ViewPort续)

现在要考虑的是如何加载标签页内的内容。虽然标签页默认是延迟渲染的(deferredRender值默认为true),但是它会预加载所有的类,因而当类文件很多的时候...

821
来自专栏阮一峰的网络日志

网页开发的6种在线调试环境

如今的网页代码,一般由三个部分组成:   * HTML,语义层,提供网页的内容。   * CSS,表现层,规定网页的外观。   * Javascript,...

3183
来自专栏前端说吧

字体图标库使用方法

1.3K7
来自专栏散尽浮华

Linux终端复用神器-Tmux使用梳理

Tmux是一个优秀的终端复用软件,类似GNU Screen,但来自于OpenBSD,采用BSD授权。使用它最直观的好处就是,通过一个终端登录远程主机并运行tmu...

22310
来自专栏前端人人

React第三方组件4(状态管理之Reflux的使用③TodoList中)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件4(状态管理之Reflux的使用①...

3324

扫码关注云+社区

领取腾讯云代金券