• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序学习

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

微信小程序

一、小程序代码构成

1.JSON 配置

(1)小程序配置 app.json

  • app.json: 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等(类似manifest)。
  • project.config.json: 工具配置 工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置
  • page.json 页面配置:独立定义每个页面的一些属性,例如刚刚说的顶部颜色、是否允许下拉刷新等等。

2、WXML 模板

WXML 充当的HTML 的角色。但是小程序的 WXML 用的标签是 view, button, text 等等。 把渲染与逻辑分离,即不让JS直接操控DOM,只需管理状态

3、WXSS样式

WXSS 用来决定 WXML 的组件应该怎么显示。WXSS 具有 CSS 大部分特性。

二、运行环境

小程序的渲染层和逻辑层分别由2个线程管理:渲染层的界面使用了WebView 进行渲染;逻辑层采用JsCore线程(这啥?)运行JS脚本。一个小程序存在多个界面,所以渲染层存在多个WebView线程,这两个线程的通信会经由微信客户端(下文中也会采用Native来代指微信客户端)做中转,逻辑层发送网络请求也经由Native转发

程序与页面

微信客户端在打开小程序之前,会把整个小程序的代码包下载到本地。

紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径:

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

这个配置说明在项目定义了两个页面,分别位于 pages/index/index 和 pages/logs/logs。而写在 pages 字段的第一个页面就是这个小程序的首页。

于是微信客户端就把首页的代码装载进来,通过小程序底层的一些机制,就可以渲染出这个首页。

小程序启动之后,在 app.js 定义的 App 实例的 onLaunch 回调会被执行:

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

整个小程序只有一个 App 实例,是全部页面共享的

三、API

1.事件监听 API

以 on 开头的 API 用来监听某个事件是否触发,如:wx.onSocketOpen,wx.onCompassChange 等。

这类 API 接受一个回调函数作为参数,当事件触发时会调用这个回调函数,并将相关数据以参数形式传入。

     wx.onCompassChange(function (res) {
     console.log(res.direction)
     })

2.同步API

以Sync结尾的API都是同步API,如wx.setStorageSync,wx.getSystemInfoSync等。同步 API 的执行结果可以通过函数返回值直接获取,如果执行出错会抛出异常。如:

   try {
        wx.setStorageSync(\'key\', \'value\')
       } catch (e) {
       console.error(e)
      }

3.异步API

大多数 API 都是异步 API,如 wx.request,wx.login(调用接口获取登录凭证) 等。这类 API 接口通常都接受一个 Object 类型的参数,这个参数都支持按需指定以下字段来接收接接口调用结果

参数名类型必填说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

回调函数的参数 success,fail,complete 函数调用时会传入一个 Object 类型参数,包含以下字段

属性类型说明
errMsg string 错误信息,如果调用成功返回 ${apiName}:ok
errCode number 错误码,仅部分 API 支持,具体含义请参考对应 API 文档,成功时为 0。

异步 API 的执行结果需要通过 Object 类型的参数中传入的对应回调函数获取。部分异步 API 也会有返回值,可以用来实现更丰富的功能,如 wx.request(发起 HTTPS 网络请求),wx.connectSocket(创建一个 WebSocket 连接) 等。

代码示例

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

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
----微信小程序热更新---- - 今天的代码你撸了嘛发布时间:2022-07-18
下一篇:
开发微信小程序环境配置(vscode)发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap