前言
今天研究了研究微信小程序的开发,具体开发教程就不多说了, 毕竟网上有很多,我这里呢是讲解一下我自己对微信小程序的理解。后续博主会慢慢补充。
首先微信小程序需要使用微信开发者工具来开发,项目结构如下:
与普通页面的区别
其实就是写页面,只不过是微信自己的一套页面写法,和正常的页面写法对应关系:
wxml文件 = html文件
js文件 = js文件
wxss文件 = css文件
json文件 相当于是一个配置页面的文件,可以配置页面的标题、字体颜色等具体配置参考app.json文档
wxml
wxml里面的标签 view、text是微信自己的页面标签写法 标签的对应介绍可以看组件文档。
js
js文件和之前基本相同,所以就不多做介绍了。
// 这一句是引入别的js文件的写法,这里是引入上层目录中utils目录下的utils.js文件
const util = require("../utils/utils.js");
// Page({})是他js的基本写法,在里面定义变量或者function,
Page({
data: {
testText: "你好"
}
// data里面是定义变量的,页面可以直接根据这里的变量名取到对应的值, 这里是定义了一个叫做testText的变量 值是你好。
页面取的时候就是 {{testText}} , 得到的就是 你好。
clickMe: function() {
wx.showModal({
title: 'Harrison的小提示',
content: '弹个框吓死你!',
cancelText: '滚!',
confirmText: '吓死了!',
success: function (res) {
if (res.confirm) {
console.log('吓死了!')
} else {
console.log('滚!')
}
}
})
}
// 这里是定义了一个function方法叫做clickMe, 然后里面是一个弹框。
})
另外推荐一个微信小程序各种弹框的写法:微信小程序之toast等弹框提示
js里面还有一些固定的函数, 比如onLoad方法。
这些是一些页面加载函数之类的类似以前的 document.ready({}) 这种。
这些固定函数在页面Page文档中可以看到.
还有一些页面的事件 例如手指触摸事件、手指触摸后移动等等 类似于以前的键盘抬起这种事件的写法可以参考事件文档.
最后附上微信小程序的Api文档。