| 微信小程序学习笔记 | 您所在的位置：网站首页 › 微信开发者工具pages › 微信小程序学习笔记 |
|
小程序实质上就是一个基于web基础的应用程序（网页）（但是不支持浏览器的api，小程序的api全部由微信提供，高度依赖微信，因此只能在微信中运行） 微信之父张小龙是这样描述小程序的： 小程序是一种不需要下载安装就可以使用的应用，它实现了应用触手可及的梦想。 用户扫一扫或者搜一下即可打开应用，也体现了用完即走的理念。 用户不用关心是否安装太多应用的问题，应用将无处不在，随时可用，但又无需安装卸载 微信小程序的接口服务器要求进行ICP备案，并且经过审核，才能发布小程序 微信小程序开发文档 https://developers.weixin.qq.com/miniprogram/dev/framework/ 开发工具：微信开发者工具 小程序的宿主环境 在iOS中，使用JavaScriptCore，在Android中使用X5内核，在ide中使用nwjs 小程序的运行机制（冷启动，热启动） 小程序在后台中停留一段时间后，被微信销毁，再打开时需要重新加载该小程序的资源，也就是冷启动，而在没被销毁的时间段内，再打开该小程序，是不需要重新加载资源，是热启动 小程序发布更新时，会异步加载新资源，也会导致冷启动 小程序产品需求 发现真实需要 用户深度访谈，分析竞品，付费意愿 需求分期：最小化可行产品（MVP） 不是每个功能都要开发（优先开发最重要和最紧急的功能） 优化开发顺序，先开发基础可用，然后迭代更新功能，满足用户需求，功能文档 根据用户体验来优化服务 原型制作工具：墨刀，Axure 微信小程序结构 index.wxml页面结构 index.wxss页面样式 index.js页面逻辑 如果设置了单独的页面样式，那么会覆盖掉app.wxss的样式 app.json定义了页面和基本配置，采用json格式，必须包含pages属性，说明小程序有哪些页面 app.json文件结构 pages是用来定义页面的，是一个数组，每一个项都是代表一个页面，例如： "pages":[ "pages/index/index", "pages/demo/demo" ],window属性是设置小程序的窗口样式，例如： "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", // 导航栏背景颜色 "navigationBarTitleText": "Weixin", // 导航栏文本 "navigationBarTextStyle":"black" // 导航栏文本颜色 },从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么 demo.js，Page()是小程序提供的一个函数，用来初始化页面，参数是一个对象，用来配置当前页面的属性 demo.wxml，该文件是用来描述页面的，和html类似 pages文件夹：存放小程序页面，每个页面代表为一个文件夹，文件夹名称为页面名称，在这个页面文件夹下的全部文件都是描述这个页面的 utils文件夹：用于存放公共的js程序，便于不同的页面进行调用 imgages文件夹：为方便管理小程序的用到的全部静态图片 app.js：当前项目的js（全局数据和反应） json：全局配置 wxss：全局样式 project.config.json：项目配置文件，配置微信开发者工具，例如工具的页面颜色，编译配置等等个性化配置 page.json: 单独定义每个页面的一些属性，例如：顶部颜色，是否可以下拉刷新等等 app.json：这是一种数据格式，小程序的静态配置（全局配置），页面的路径，界面的表现，顶部样式，网络超时等等 pages字段：描述当前小程序所有页面的路径，让微信清楚小程序页面定义在哪个目录 window字段：定义小程序所有页面的顶部背景颜色，文字颜色等等 json是包裹在一个括号中，以键值对的方式表达数据，值必须包含在双引号中，在json中无法使用注释 wxml WXML：从html中衍生而来一种专门在小程序页面中使用的语言，组合了基础组件，事件系统，构造出页面的结构 view元素是表示块级，和div类似 scroll-view元素是表示可滚动页面区域 text元素是表示行内文本，和span类似 image元素是表示图片，和img类似 swiper元素是用来搞轮播图 属性 bindtap属性可绑定事件函数 hidden属性控制元素是否隐藏，true为隐藏 wxss样式，采用css样式语法，和写普通的css样式一样，选择器属性样式之类的就不写了，具备css大部分的特性，具体看我写的css笔记，背景，字体，边框，定位，大小之类的，用法是一样的，可以给wxml标签设置class，采用的是W3C标准盒模型，另外小程序官方推荐使用flex布局 推荐静态样式写入class中，style用来接收动态的样式，避免出样式优先级问题，例如： Alt+shift+f：自动格式化代码 注意：微信小程序的基本单位是rpx，而不是px，不管是什么页面（无论多大或者多小），页面100%就是750rpx，因此页面的1%等于7.5rpx 另外微信官方提供了一套UI框架，https://weui.io/，github库地址：https://github.com/Tencent/weui-wxss/ 用法，直接引用weui.wxss，然后像用bootstrap一样，给标签加类 例子： hallo wrod Page({ data: { color: '#ccc' } })WXSS选择器支持.class，#id，组件选择（例如view，选择全部view组件），::after（view::after，在view组件后插入内容），::before（view::before，在view组件前面插入内容） 项目目录结构 app.js：必需，小程序的逻辑所在 app.json：必需，小程序的公共配置 app.wxss：不必需，小程序的公共样式 页面组成 js：必需，页面逻辑 wxml：必需，页面结构 json：不必需，页面的配置 wxss：不必需，页面的样式 小程序支持的文件： wxs，png，jpg，jpeg，gif，svg，json，cer，mp3，aac，m4a，mp4，wav，ogg，silk，wasm，br 全局配置：app.json是用于小程序进行的全局配置，决定页面文件路径，窗口表现，网络超时等等 pages配置：定义页面的路径，优先显示第一个设置的页面 window配置：定义所有页面的顶部样式 tabBar配置：底部tab栏的表现 页面配置：每个页面都可以使用.json来配置当前页面的窗口表现，注意：会覆盖掉app.json相同的配置项 stiemap配置：通过配置sitemap.json或者后台页面收录开关来确定小程序页面是否允许被微信索引，当被允许时，微信会通过爬虫的形式，对小程序的页面内容进行索引 生命周期 应用生命周期 onLaunch：小程序初始化，当页面第一次加载时触发，跳转页面返回不触发 onShow：小程序显示（前台），当页面显示或者从后台返回小程序显示该页面时触发，从跳转页面返回时触发 onError：小程序页面异常触发 onPageNotFound：页面不存在 页面生命周期 onLoad：页面加载触发 onShow：页面显示触发 onReady：页面初次渲染完成触发 onHide：页面隐藏触发 onUnload：小程序页面卸载，例如： 重定向一个页面，原页面被关闭 onPullDownRefresh：用户下拉触发 onReachBottom：页面上拉触底触发 onPageScroll：页面被滚动触发 onResize：页面尺寸发生改变时输出 小程序组件生命周期 created：当组件实例被初始化时触发该生命周期钩子（在该钩子触发时，并不能使用setData，this.data等于Component.data） attached：当组件实例初始化完毕，进入页面节点树后触发该生命周期钩子（this.data被初始化为组件的当前值） ready：当组件实例在视图层布局完成后触发该生命周期钩子 moved：当组件实例被移动到节点树另一个位置时触发该生命周期钩子 detached：当组件实例被销毁时触发该生命周期钩子（退出当前组件的页面树，也会触发该生命周期钩子） error：当组件方法抛出错误时触发该生命周期钩子 WXML，数据绑定，列表渲染，条件渲染，模板引用 数据绑定和vue类似，不过小程序的数据绑定是单向的 index.wxml {{message}}index.js Page({ data: { message: 'hallo word' } })属性绑定 index.wxml index.js Page({ data: { message: 'hallo word' } })列表渲染 {{index}}:{{abc}} Page({ data: { arrs: [1,2,3,4,5] } })条件渲染 True hallo wrod Page({ data: { hallo: true, abc: 2 } }允许使用wx:if，wx:elif和wx:else使用 wx:if是控制属性，可以判断组件是否是否显示，多个组件使用block元素包裹 vx:if和hidden组件的区别，hidden是通过hidden属性隐藏，vx:if是通过局部重新渲染的方式，直接将该组件移除出该DOM WXML的共同属性，id，class，style，hidden，data-，bind/catch* 模板引用 data.wxml id: {{id}} name: {{name}} age: {{age}}index.wxml index.js Page({ data: { dataitem: { id: 1, name: chenjunlin, age: 20 } } })注意：import模板时，是存在作用域的，只能import该模板的内容，如果这个wxml文件内有其他内容是不会被渲染到页面的，避免模板引用死循环 而使用include组件引用的话，是直接目标整个引入进来，这个时候引用模板和直接在声明模板的文件使用是一样的，就好像include组件将目标整个复制进来一样 WXS WXS是小程序的脚本语言，搭配WXML使用，WXS不依赖于小程序的运行时基本库版本，和JavaScript环境隔离，WXS不能调用js文件定义的，也不能使用小程序提供的api，WXS函数不能作为事件回调函数 var abc = 'hallo word' module.exports = { xyz: abc } module.exports.value = 100 {{hhh.xyz}} {{hhh.value}}小程序事件 事件是视图层到逻辑层的通讯方式，监听用户的行为，通过事件的方式反映到逻辑层进行处理 点击事件（tap），长按事件（longpress），触摸事件（例如：开始触摸（touchstart），结束触摸（touchend），终止触摸（touchcancel））等等 事件（视图层到逻辑层的通信） hallo word Page({ taptest(event) { console.log(event) } })事件处理机制：事件捕获，事件处理，事件冒泡 路由 打开新页面通过调用wx.navigateTo API或者使用组件 页面重东西通过调用wx.redirectTo API或者使用组件 页面返回通过调用wx.navigateBack API或者使用组件 tab切换通过调用wx.switchTab API或者使用组件 重启动通过调用wx.reLaunch API或者使用组件 MINA(MINA IS NOT APP) 是微信开发小程序的框架 MINA框架由视图层（小程序的page页面），逻辑层，系统层（JSBridge，微信API，离线存储，网络请求等等）组成 渲染会将WXML节点转换成js对象（AST节点树），更新数据时会进行diff差异处理 小程序运行机制 启动（冷启动（首次启动需要加载，生命周期为销毁时），热启动（无需加载）） 微信小程序提供2个线程来处理，分别是View Thread和AppService Thread，这2个线程同时进行加载（并行），View Thread加载完毕后，会通知AppService Thread，AppService Thread再将处理完毕的数据交付给View Thread 微信小程序API 网络请求，媒体处理，上传下载文件，数据缓存，位置信息，设备信息，路由控制 微信开放功能：登录授权，微信支持，模板消息，转发分享，打开APP API一般有3个回调函数，success（api成功后），fail（api调用失败后），complete（api调用完成时，不管成功与否） Api官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/ |
| CopyRight 2018-2019 实验室设备网 版权所有 |