|
|
122846799@qq.com
laomo666
====== 1.标签的不同：
1.1 WXML 就是 HTML
1.2 div, p, span 等等 通通用 view 来表示
====== 2.内置了语法:
WXML 是这么写 :
<text>{{msg}}</text>
JS 只需要管理状态即可:
this.setData({ msg: "Hello World" })
====== 3. WXSS 模板
新增 rpx 尺寸单位；
====== 4. js 逻辑交互
微信有很多自带的事件
相关手册地址： https://developers.weixin.qq.com ... iew/wxml/event.html
====================================程序与页面 与 组件 与API=======
1.写在 pages 字段的第一个页面就是这个小程序的首页
2.初始函数为 app.js 重的 onLaunch
小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行:
3.page 为页面构造器
Page({
data: { // 参与页面渲染的数据
logs: []
},
onLoad: function () {
// 页面渲染后 执行
}
})
4.组件
<map></map> 直接渲染坐标
组件可以实现多种自带功能：
例如： 获取用户的定位
组件列表：https://developers.weixin.qq.com ... omponent/audio.html
5. 小程序 内置了多种API
获取用户信息、微信支付、获取用户地理位置等；
参考地址： https://developers.weixin.qq.com/miniprogram/dev/api/
=========================上线步骤==============================
1.发布上线
一个小程序从开发完到上线一般要经过 预览-> 上传代码 -> 提交审核 -> 发布等步骤。
==========================目录机结构 =====================
1.主项目下： app.js /app.json /app.wxss 属于全局配置文件
2.一个小程序有 4个文件
a.js /a.wxml /a.json / a.wxss
方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。
3.上传限制格式：
wxs
png
jpg
jpeg
gif
svg
json
cer
mp3
aac
m4a
mp4
wav
ogg
silk
================= 小程序的配置============================
配置文件在 app.json
在微信搜索小程序时，其索引是根据 sitemap 配置 来 搜索的
sitemap 配置：https://developers.weixin.qq.com ... mework/sitemap.html
=======================小程序框架=============================
1.场景值：用来描述用户进入小程序的路径
参考链接：https://developers.weixin.qq.com ... nce/scene-list.html
2.注册小程序：
注册小程序
每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。
// app.js
App({
onLaunch (options) {
// Do something initial when launch.
},
onShow (options) {
// Do something when show.
},
onHide () {
// Do something when hide.
},
onError (msg) {
console.log(msg)
},
globalData: 'I am global data'
})
整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数。
// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data
参考文档： https://developers.weixin.qq.com ... erence/api/App.html
3. 页面注册： 在页面对应的js 文件中进行注册，指定页面的初始数据，生命周期回调，事件处理函数等。
参考page 对应的构造 https://developers.weixin.qq.com ... rence/api/Page.html
4.behaviors ： 多个页面共通相同的数据字段 和 方法
用法参考： https://developers.weixin.qq.com ... nent/behaviors.html
5. 使用 Component 构造器构造页面，不同于page 这个 有一个 methods，所有方法都要放在 methods 里；
Component用法参考：https://developers.weixin.qq.com ... nent/component.html
6. 微信路由跳转：卧槽 什么垃圾玩意 都不写怎么跳
卧槽 我最后研究出来了:
<navigator url="/pages/laomo/laomo" >跳转页面</navigator>
7. 模块化 ：
概念：将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。
抛出示例：// common.js
function sayHello(name) {
console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
console.log(`Goodbye ${name} !`)
}
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye
接收示例：
var common = require('common.js')
Page({
helloMINA: function() {
common.sayHello('MINA')
},
goodbyeMINA: function() {
common.sayGoodbye('MINA')
}
})
8.方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等
8.1 潜规则：
on 开头的 API 用来监听某个事件是否触发；
以 Sync 结尾的 API 都是同步 API
参考地址：https://developers.weixin.qq.com/miniprogram/dev/api/
=================== 小程序页面渲染与样式 wxml 与 wxss =============================
1.WXML 语法 (其实就是html 变种语法 将js/css 都写了进去)
主要包括： 数据绑定、列表渲染、条件渲染、模板、引用
查看地址：https://developers.weixin.qq.com ... ence/wxml/list.html
2.wxss 语法 (其实就是css )
2.1 单位：rpx - 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，
共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
2.2 @import "common.wxss"; 利用这种方法 引入 wxss
参考链接： https://developers.weixin.qq.com ... work/view/wxss.html
3.wxs 就相当于 写在页面中的js ;
3.1 注意事项
3.1.1 WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
3.1.2 WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。
3.1.3 WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义 的函数，也不能调用小程序提供的API。
3.1.4 WXS 函数不能作为组件的事件回调。
3.2 小例子
<wxs module="m1">
var msg = "hello world";
module.exports.message = msg;
</wxs>
<view> {{m1.message}} </view>
使用 WXS 函数用来响应小程序事件，目前只能响应内置组件的事件，不支持自定义组件事件。
4. 事件系统
事件的使用方式
在组件中绑定一个事件处理函数。
如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
在相应的Page定义中写上相应的事件处理函数，参数是event。
Page({
tapName: function(event) {
console.log(event)
}
})
4.1 wxs 利用 <wxs module="wxs" src="./test.wxs"></wxs> 这样的方式引入；
5. 事件绑定
5.1 普通事件绑定
<view bindtap="handleTap"> Click here! </view>
5.2 坑爹般数据绑定
<view bindtap="{{ handlerName }}">Click here!</view>
5.2 除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。
5.3 除 bind 和 catch 外，还可以使用 mut-bind 来绑定事件。一个 mut-bind 触发后，如果事件冒泡到其他节点 上，其他节点上的 mut-bind 绑定函数不会被触发，但 bind 绑定函数和 catch 绑定函数依旧会被触发。
6.事件捕获：
捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段
7. 双向绑定 <input model:value="{{value}}" />
8. 基础组件 、就是很多封装好的模块
参考网址：https://developers.weixin.qq.com ... nent/navigator.html
9. WXML节点：最常见的用法是使用这个接口来查询某个节点的当前位置，以及界面的滚动位置。
暂时用不上啊-。- 知道作用就行
10 动画 就是动画效果 参考
https://developers.weixin.qq.com ... view/animation.html
=========================运行与销毁==============================
冷启动：如果用户首次打开，或小程序销毁后被用户再次打开，此时小程序需要重新加载启动，即冷启动。
热启动：如果用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态，这个过程就是热启动。
小程序每次冷启动时，都会检查是否有更新版本，如果发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序需要等下一次冷启动才会应用上。
如果需要马上应用最新版本，可以使用 wx.getUpdateManager API 进行处理。
const updateManager = wx.getUpdateManager()
updateManager.onCheckForUpdate(function (res) {
// 请求完新版本信息的回调
console.log(res.hasUpdate)
})
updateManager.onUpdateReady(function () {
wx.showModal({
title: '更新提示',
content: '新版本已经准备好，是否重启应用？',
success(res) {
if (res.confirm) {
// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
updateManager.applyUpdate()
}
}
})
})
updateManager.onUpdateFailed(function () {
// 新版本下载失败
})
|
|
发表于 2020-4-15 10:30:26