微信小程序-02-项目文件之间配合和调用关系

我就不说那么多了,我是从官方文档拷贝的,然后加上一些自己的笔记,不喜勿喷

官方文档:https://developers.weixin.qq.com/miniprogram/dev/index.html?t=18090718

小程序的启动

  • 微信客户端在打开小程序之前,会把整个小程序的代码包下载到本地
  • 紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径:
{
//项目中所有页面的路径,不要后缀名,当然省掉的是: .wxml
"pages":[
"pages/index/index",
"pages/logs/logs"
]
}
  • 这个配置说明在小程序项目定义了两个页面,分别位于 pages/index/index 和 pages/logs/logs。而写在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)
  • 于是微信客户端就把首页的代码装载进来,通过小程序底层的一些机制,就可以渲染出这个首页
  • 小程序启动之后,在 app.js 定义的 App 实例的 onLaunch 回调会被执行:
App({
onLaunch: function () {
// 小程序启动之后 触发
}
})
  • 【注意】:整个小程序只有一个 App 实例,是全部页面共享的,更多的事件回调参考文档 注册程序 App
  • 接下来我们简单看看小程序的一个页面是怎么写的

程序与页面

  • 一般来说,每个自定义的 wxml 页面都需要去写一个 js 文件和一个 wxss 文件,那这里的 js 文件当然上面说了整个小程序只有一个 App 实例,那么这里的是 page

  • 截图:

  • 当然这里图片只是一些体积很小的图片,大图片我们是要把图片放在 Github 上通过链接调用

  • 然后,你可以观察到 pages/logs/logs 下其实是包括了4种文件的,微信客户端会先根据 logs.json 配置生成一个界面,顶部的颜色和文字你都可以在这个 json 文件里边定义好。紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式。最后客户端会装载 logs.js,你可以看到 logs.js 的大体内容就是:

Page({
data: { // 参与页面渲染的数据
logs: []
},
onLoad: function () {
// 页面渲染后 执行
}
})
  • Page 是一个页面构造器,这个构造器就生成了一个页面。在生成页面的时候,小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构,于是就得到了你看到的小程序的样子
  • 在渲染完界面之后,页面实例就会收到一个 onLoad 的回调,你可以在这个回调处理你的逻辑
  • 有关于 Page 构造器更多详细的文档参考 注册页面 Page

组件

  • 小程序提供了丰富的基础组件给开发者,开发者可以像搭积木一样,组合各种组件拼合成自己的小程序
  • 就像 HTML 的 div, p 等标签一样,在小程序里边,你只需要在 WXML 写上对应的组件标签名字就可以把该组件显示在界面上,例如,你需要在界面上显示地图,你只需要这样写即可:
<map></map>

使用组件的时候,还可以通过属性传递值给组件,让组件可以以不同的状态去展现,例如,我们希望地图一开始的中心的经纬度是广州,那么你需要声明地图的 longitude(中心经度) 和 latitude(中心纬度)两个属性:

//属性:longitude:经度;latitude:纬度
<map longitude="广州经度" latitude="广州纬度"></map>
  • 组件的内部行为也会通过事件的形式让开发者可以感知,例如用户点击了地图上的某个标记,你可以在 js 编写 markertap 函数来处理:
//属性:bindmarkertap:绑定标记
<map bindmarkertap="markertap" longitude="广州经度" latitude="广州纬度"></map>
  • 当然你也可以通过 style 或者 class 来控制组件的外层样式,以便适应你的界面宽度高度等等。
  • 更多的组件可以参考 小程序的组件。

API

  • 【注意】这个很重要

  • 为了让开发者可以很方便的调起微信提供的能力,例如获取用户信息、微信支付等等,小程序提供了很多 API 给开发者去使用

  • 要获取用户的地理位置时,只需要:

wx.getLocation({
type: 'wgs84',
success: (res) => {
var latitude = res.latitude // 经度
var longitude = res.longitude // 纬度
}
})
  • 调用微信扫一扫能力,只需要:
wx.scanCode({
success: (res) => {
console.log(res)
}
})
  • 需要注意的是:多数 API 的回调都是异步,你需要处理好代码逻辑的异步问题。
  • 更多的 API 能力见 小程序的API

更多文章链接:微信小程序

微信小程序-02-项目文件之间配合和调用关系的更多相关文章

  1. 微信小程序开发--页面之间的跳转

    一.navigator--完成页面之间的跳转 1.新建一个页面文件夹 2.在app.json文件中引入页面 "pages": [ "pages/index/index&q ...

  2. 微信小程序和H5之间相互跳转

    1.微信小程序跳转小程序 wx.navigateToMiniProgram <script src='https://res.wx.qq.com/open/js/jweixin-1.3.0.js ...

  3. 微信小程序自定义组件的使用以及调用自定义组件中的方法

    在写小程序的时候,有时候页面的内容过多,逻辑比较复杂,如果全部都写在一个页面的话,会比较繁杂,代码可读性比较差,也不易于后期代码维护,这时候可以把里面某部分功能抽出来,单独封装为一个组件,也就是通常说 ...

  4. 微信小程序之 页面跳转 及 调用本地json的假数据调试

    一.微信小程序 跳转页面 小程序页面有2种跳转,可以在wxml页面或者js中: (1)在wxml页面中: <navigator url="../index/index"> ...

  5. 微信小程序开发-易源API的调用

    起因:在开发一款旅游类微信小程序时,需要接入大量的景点信息,此时可以选择自己新建数据库导入数据并读取,但是对于我来说,因为只有一个人,数据库还涉及到需要维护方面,选择调用已有API. 过程:首先查阅微 ...

  6. 微信小程序之页面之间传递值

    页面之间传值有三种方式 1.url传值 2.本地存储传值 3.全局变量传值 1.url传值: 通过url传值的需要通过option来获取参数值. 更多详情可以访问小程序-navigateTo章节. A ...

  7. 微信小程序6 - 页面之间传参及通知系统封装

    1. 简单传参 wx.navigateTo({ url: '/pages/demo/index/index?id=1' }) /pages/demo/index/index.js 中 onLoad(o ...

  8. 微信小程序填坑,wx.request() 内调用setData()方法错误的解决办法

    再方法内添加一行代码,把this对象赋值给给一个变量供success()方法内调用 核心代码: var v = this.txt; 完整示例 abc:function(e){//该函数用于和后台交互 ...

  9. 5款微信小程序开发工具使用报告,微信官方开发工具还有待提升

    微信小程序已经内测有一段时间了,笔者本着好奇加学习的心态写了几个小demo,虽然在MINA框架上并没有遇到太多的坑,但官方开发工具实在不敢恭维. api提示不全,要一个个查api啊,写代码超级慢啊 很 ...

随机推荐

  1. 【性能测试】:oracle数据库的监控方式

    一,[前提]:登陆操作系统后,需要切换到SQLPLUS的命令行模式:sqlplus / as sysdba 二,[监控步骤]:开始时执行一次:SQL>exec DBMS_WORKLOAD_REP ...

  2. 解决flex布局下, elementui table组件不能跟随父组件的宽度而变化的bug

    bug: 我在flex布局的元素中使用了elementui的table组件,饿了么的table上会被加一个动态的宽度, 当第一次改变flex元素宽度的时候.table的动态宽度会变化,第二次和以后就不 ...

  3. mysql中对my.cnf进行说明

    my.cnf说明: #vim /etc/my.cnf以下只列出my.cnf文件中[mysqld]段落中的内容,其他段落内容对MySQL运行性能影响甚微,因而姑且忽略. [mysqld] port =  ...

  4. Memcahe安装与配置

    1.先启动Memcahe服务 (1)通过Memcahe文件夹下的memcahe.exe程序启动 (2)将Memcahe加到Windows服务中去 为了方便使用,大多数情况下,是使用第二种方式,来启动M ...

  5. JavaScript设计模式-18.享元模式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 16G的U盘 4G的压缩

    文件系统格式原因,或是你的U盘是扩容盘(就是实际容量和显示的不一样)常用文件系统支持的单个文件大小: FAT16 支持单个文件最大不超过2GB FAT32 支持单个文件最大不超过4GB(有人说实际超过 ...

  7. redis数据类型(五)set类型

    一. set类型 set是无序集合,最大可以包含(2 的 32 次方-1)个元素. set 的是通过 hash table 实现的,所以添加,删除,查找的复杂度都是 O(1). hash table ...

  8. (完整)爬取数据存储之TXT、JSON、CSV存储

    一.文件存储 1. TXT文本存储 例:知乎发现页面,获得数据存成TXT文本 import requests from pyquery import PyQuery as pq url="h ...

  9. 每天一道剑指offer-二叉树的下一个结点

    题目 每天一道剑指offer-二叉树的下一个结点 https://www.nowcoder.com/practice/ef068f602dde4d28aab2b210e859150a?tpId=13& ...

  10. Uboot流程分析

    1. uboot的配置分析 1).配置入口分析 首先分析配置: 从make mx6dl_sabresd_android_config可知配置项,搜索Makefile: mx6solo_sabresd_ ...