小程序 简易教程
https://mp.weixin.qq.com/debug/wxadoc/dev/
稍微写点好了,本来是打算直接写到项目里面的,但是.json的配置文件里面好像不可以添加注释,所以 哎 无奈。
前面的废话不说了,看代码构成 。 微信还是以前端的MVVM模式来做的。 传统的HTML 是HTML+CSS+JS ,微信类似于这种,为WXML+WXSS+JS 一一对应咯。
WXML为页面结构,WXSS为页面样式 JS为页面逻辑。
JSON配置:
1.app.json 小程序配置 即全局配置 ,所谓配置 一般就是配置界面样式(window)顶部标题 颜色 等 ,还有项目文件路径(pages)。
2.project.config.json 这个也是配置,但是是工具配置,跟当前的IDE开发工具有关,目的是即使换电脑了,拷贝这个文件过去覆盖也可以轻松完成工具配置。跟项目无关。
3.page.json 页面配置 针对单独页面做的配置了。比如初始化项目后出现的log.json ,可以在上面定义一些页面单独的属性,比如是否可以下拉刷新 ,页面标题什么的。
WXML模板:
//pages/index/index.wxml
//相对于前端 很多标签不一样了,其实也就是小程序对这些标签做了一定的封装,特别是地图 音频 视频等等 ,可以直接找到指定的标签放进去就可以了。
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
<block wx:else>
<image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
2.多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式. {{}}是用js里面的参数。通过 {{ }} 的语法把一个变量绑定到界面上,我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系,还需要 if/else, for等控制能力,在小程序里边,这些控制能力都用 wx: 开头的属性来表达。
WXSS 样式:
1.小程序增加了一个尺寸类型 rpx,避免换算的问题。
提供全局样式 跟局部样式,比如app.wxss 就是全局样式。log.wxss 就是局部样式。
JS交互逻辑:
比如一些点击事件 用户反馈之类的,都是在js里面写的。
<button bindtap="clickMe">点击我</button>
bindtap就是绑定事件,然后在js里面写好这个方法就可以了。
小程序提供了非常多的api,例如获取用户信息、本地存储、微信支付等。
tip:
1.微信客户端在打开小程序之前,会把整个小程序的代码包下载到本地。然后加载渲染出app出来。
2.程序启动会有回调,相当于app的生命周期嘛:
App({
onLaunch: function () {
// 小程序启动之后 触发 可以玩点刺激的
}
})
3.整个小程序只有一个 App 实例,是全部页面共享的
4.页面渲染完毕后 也是有回调的,在js文件里面写就行
Page({
data: { // 参与页面渲染的数据
logs: []
},
onLoad: function () {
// 页面渲染后 执行
}
})
Page 是一个页面构造器,这个构造器就生成了一个页面。在生成页面的时候,小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构,于是就得到了你看到的小程序的样子。
在渲染完界面之后,页面实例就会收到一个 onLoad 的回调,你可以在这个回调处理你的逻辑。
小程序 框架
全局配置 除了 pages 跟window属性,还有 tabBar,networkTimeout,debug等
小程序 框架
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/structure.html
一个页面由四个文件组成
文件类型 必需 作用
js 是 页面逻辑
wxml 是 页面结构
json 否 页面配置
wxss 否 页面样式表
配置
全局配置的属性
pages :指向页面文件的路径(每次创建貌似都要写一个)
window:页面顶部的属性 比如文字 颜色 能否下拉刷新 等
tabBar:设置底部tabbar,用list包裹 里面pagePath指向路径,text定义名字
networkTimeout:设置网络超时时间
debug :是否开启debug模式,用来定位问题,默认关闭
functionalPages:是否开启页面插件功能。默认关闭 不知道啥用
subPackages: 分包功能 听起来有点像是插件化的功能
workers:worker代码放置的位置 ,为了处理多线程?
requiredBackgroundModes:需要在后台使用到的功能,比如项目中使用到了音乐播放的话,可以写到这里面去
其他的 就不写了 ,感觉没啥必要。
文档写的太清楚了 有点不大想写这个笔记了。
app.json跟局部配置.json文件有相同设定的时候,也是根据就近原则,用最近的。
逻辑
前端的逻辑都是写在.js文件上面,用javascript引擎。 逻辑层处理数据,发送数据给视图层,并且接收视图层的反馈。 开发者写的所有代码最终将会打包成一份 JavaScript 文件,并在小程序启动的时候运行,直到小程序销毁。这一行为类似 ServiceWorker,所以逻辑层也称之为 App Service。 在 JavaScript 的基础上,我们增加了一些功能,以方便小程序的开发:
增加 App 和 Page 方法,进行程序和页面的注册。 增加 getApp 和 getCurrentPages 方法,分别用来获取 App 实例和当前页面栈。 提供丰富的 API,如微信用户数据,扫一扫,支付等微信特有能力。 每个页面有独立的作用域,并提供模块化能力。 注意:小程序框架的逻辑层并非运行在浏览器中,因此 JavaScript 在 web 中一些能力都无法使用,如 window,document 等。
小程序 逻辑层
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/app.html
App(Object)
用来注册一个小程序。接受一个 Object 参数,其指定小程序的生命周期回调等。
App() 必须在 app.js 中调用,必须调用且只能调用一次。不然会出现无法预期的后果。
这个方法有点类似于application的onCreate方法。
里面参数涉及一系列的监听方法,小程序初始化启动,小程序前后台切换,甚至一些问题都可以展示出来。
关于小程序销毁,说是关闭并没有销毁小程序,而只是进入了后台,只有在资源不足的情况下,才会销毁,但是我发现部分手机 比如我自己的360N5,死也不销毁,卡的爆炸,需要手动去一键加速搞定他。
App({
onLaunch: function(options) {
// Do something initial when launch.
//类似于application的onCreate,在options又能拿到一堆信息,比如进入的渠道(场景值) 等,
},
onShow: function(options) {
// Do something when show.
//类似于application的从后台转前台监听
},
onHide: function() {
// Do something when hide.
//类似于application的从前台转后台监听
},
onError: function(msg) {
console.log(msg)
//错误提醒,用于debug,应该要设置debug的属性才可以,错误信息,包含堆栈
},
globalData: 'I am global' //定义的全局变量
})
getApp()可以获取小程序实例 可以拿到里面定义的变量 ,比如上面的globalData ,当然在App方法里面 直接用this就能拿到实例。
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html
app.js里面可以做全局的监听 ,用的是App()方法 页面也有自己的js文件,里面用的是Page()方法,监听的更加到位 ,相当于android里面的所有生命周期都有
//index.js
Page({
data: {
//数据 可以填多个 按照这个样式就行,要json格式
text: "This is page data."
},
onLoad: function(options) {
// Do some initialize when page load.
//类似 activity onCreate()
},
onReady: function() {
// Do something when page ready.
//类似 activity onStart(),但是一个页面只会调用一次
},
onShow: function() {
// Do something when page show.
//类似activity onResume()
},
onHide: function() {
// Do something when page hide.
//类似activity onPause
},
onUnload: function() {
// Do something when page close.
//类似 activity onDestroy()
},
onPullDownRefresh: function() {
// Do something when pull down.
//下拉刷新监听
},
onReachBottom: function() {
// Do something when page reach bottom.
//上拉加载监听
},
onShareAppMessage: function () {
// return custom share data when user share.
//右上角分享监听
//注意:只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮
},
onPageScroll: function() {
// Do something when page scroll
//滚动监听
},
onTabItemTap(item) {
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
//当前是tab页的话 点击tab监听
},
// Event handler.自定义方法处理事件
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// this is setData callback
})
},
customData: {
hi: 'MINA'//开发者可以添加任意的函数或数据到 Object 参数中,在页面的函数中用 this 可以访问
}
})
稍微需要注意一点的是 Object 内容在页面加载时会进行一次深拷贝,需考虑数据大小对页面加载的开销。并且必须是json格式的。
Page.prototype.setData(Object data, Function callback)
setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。
以为小程序是跟Vue一样,改变值就可以直接同步到视图层的,现在看来不是这样的,需要调用setData才可以将视图层绑定的数据修改,这样才能作用到视图层,不然直接修改是没有作用的 而且会有数据不一致的风险。 当然,如果你数据本身就只是一个参数,比如说page,跟视图层不绑定的,那就直接改呗。
以上所写更类似于笔记,毕竟官方文档太清晰的。
网友评论