1.文件结构：小程序包含一个描述整体程序的app和多个描述各自页面的page。
1）小程序主体部分由三个文件组成，必须放在项目的根目录：
app.js 必须有。小程序逻辑
app.json 必须有。小程序的公共设置
app.wxss 可有。小程序的公共样式表
2）小程序页面由四个文件组成：
.js 必须有。单页面逻辑
.wxml 必须有。单页面结构
.wxss 可有。单页面样式表
.json 可有。单页面配置
2.app.json 配置项列表
1）pages：必须有。字符串数组，指定小程序的页面组成。第一行就是小程序的初始页面，增加、减少
页面时要对pages数组进行修改。文件名不需写后缀，因为框架是寻找路径下的（.json/.js/
.wxml/.wxss）四个文件进行整合。
2）window：设置小程序的状态栏、导航条、标题、窗口背景颜色。
navigationBarBackgroundColor （HexColor）导航栏背景颜色
navigationBarTextStyle （String）导航栏标题颜色，仅支持black/white
navigationBarTitleText （String）导航栏标题文字
navigationStyle （String）导航栏样式，仅支持defaul/custom，其中custom模式可以
自定义导航栏，只保留右上角胶囊状的按钮
backgroundTextStyle （HexColor）窗口背景颜色
backgroundTextStyle （String）下拉loading的样式，仅支持dark/light
backgroundColorTop （String）顶部窗口背景颜色，仅iOS支持
backgroundColorBottom （String）底部窗口背景颜色，仅iOS支持
enablePullDownRefresh （Boolean）是否开启下拉刷新，页面变为可上下拖动
onReachBottomDistance （Number）页面上拉触底事件触发时距页面底部的距离，单位是
px（像素）
（HexColor 十六进制颜色值，如"#ffffff"）
（navigationStyle只在app.json中生效，其他的.json文件里无效，低版本的微信客户端开启custom
要做好兼容）
3）tabBar：配置小程序在客户端底部或者顶部的tab栏，以及点tab栏时切换显示的页面
color （HexColor）必须有。tab上的文字颜色
selectedColor （HexColor）必须有。tab上文字选中时的颜色
backgroundColor （HexColor）必须有。tab的背景颜色
borderStyle （String）tabbar边框颜色，仅支持black/white
position （String）仅支持bottom/top
list （Array）必须有。tab的列表，最少2个tab，最多5个
pagePath （String）页面路径，必须在pages中先定义
text （String）tab上按的文字
iconPath （String）图片路径，icon大小限制为40kb，建议尺寸为
81*81 px，当position为top时，此参数无效，不支持图片
selectedIconPath （String）选中时图片路径，限制同上
4）networkTimeout：设置各种网络请求的超时时间
request （Number）wx.request的超时时间，单位毫秒，默认60000
connectSocket （Number）wx.connectSocket的超时时间，单位毫秒，默认60000
uploadFile （Number）wx.uploadFile的超时时间，单位毫秒，默认60000
downloadFile （Number）wx.downloadFile的超时时间，单位毫秒，默认60000
5）debug：可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形 式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位 一些常见的问题。
3.page.json 单个页面配置。页面的配置比app.json全局配置简单得多，只是设置 app.json 中的window
配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。页面的.json
只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键。
navigationBarBackgroundColor （HexColor）导航栏背景颜色
navigationBarTextStyle （String）导航栏标题颜色，仅支持black/white
navigationBarTitleText （String）导航栏标题文字
backgroundColor （HexColor）窗口背景颜色
backgroundTextStyle （String）下拉loading的样式，仅支持dark/light
enablePullDownRefresh （Boolean）是否开启下拉刷新，页面变为可上下拖动
disableScroll （Boolean）设置为true则页面整体不能上下滚动，只在
page.json中有效，无法在app.json中设置该项
onReachBottomDistance 页面上拉触底事件触发时距底部的距离，单位为px
4.app.js 小程序逻辑
App（） 注册小程序的函数，接受一个object参数，该参数指定小程序的生命周期函数等，可在大
括号里直接定义：APP（{ -定义- }），APP（）必须在app.js中注册，只能注册一个。
object参数内容：
onLaunch （Function）生命周期函数，监听小程序的初始化，当小程序初始化完成时
会触发一次（全局只触发一次），此时不能调用getCurrentPages（）函
数，因为还没生成page
onShow （Function）生命周期函数，监听小程序的显示，当小程序启动显示或从后
台进入前台显示时触发
onHide （Function）生命周期函数，监听小程序的隐藏，当小程序从前台进入后台
时触发
onError （Function）监听错误，当小程序发生脚本错误或者api调用失败时触发，并
带上错误信息
onPageNotFound （Function）监听页面丢失，当小程序出现要打开的页面不存在的情况
时触发，并带上页面信息回调该函数
（另外，开发者可有添加任意的函数或者数据到object参数中，在APP（）的object参数的 函数中，用 this.函数 或者 this.变量 来访问）
1）onLauch，onShow 参数
path （String）打开小程序的路径
query （Object）打开小程序的query
scene （Number）打开小程序的场景值
shareTicket （String）转发分享
referrerInfo （Object）当厂家由另一个小程序、公众号或者APP打开时，返回此字段
referrerInfo.appId （String）来源小程序、公众号或者APP的appId
referrerInfo.extraData （Object）来源小程序传过来的数据，scene = 1037 或1038
时支持
2）支持返回referrerInfo.appId 的场景值
场景值 场景 appId信息含义
1020 公众号profile页相关小程序列表 返回来源公众号的appId
1035 公众号自定义菜单 返回来源公众号的appId
1036 APP分享消息卡片 返回来源应用的appId
1037 小程序打开另一个小程序 返回来源小程序的appId
1038 从另一个小程序返回小程序 返回来源小程序的appId
1043 公众号模板消息 返回来源公众号的appId
3）onPageNotFound 当要打开的页面不存在时，会回调这个监听器，并带上一下信息
path （String）不存在的页面的路径
query （Object）打开不存在页面的query
isEntryPage （Boolean）是否为本次启动的首个页面（如：从分享等入口进来，首个
页面是开发者配置的分享页面）
5.pageName.js 页面逻辑
Page（）注册一个页面的函数，接受一个object参数，该参数指定页面的初始数据、生命周期函数、
事件处理函数等。
object参数内容：
data （Object）页面的初始数据，在对应的 .wxml 文件里调用
onLoad （Function）生命周期函数，监听页面的加载，一个页面只调用一次，可以在该函
数中获取打开当前页面所调用的query参数
onReady （Function）生命周期函数，监听页面初次渲染完成，一个页面只调用一次，代表
页面已经准备妥当，可以和视图层进行交互，对界面的设置（如：
wx.setNavigationBarTitle等设置须在该函数之后）
onShow （Function）生命周期函数，监听页面的显示，每次打开页面都会调用一次
onHide （Function）生命周期函数，监听页面的隐藏，当navigateTo 或底部tab切换的时
候调用
onUnload （Function）生命周期函数，监听页面的卸载，当redirectTo 或 navigateBack的
时候调用
onPullDownRefresh （Function）页面下拉更新事件处理函数，监听用户下拉动作，须在
app.json的window选项中或者页面配置中开启 enablePullDownRefresh才可触发，当处理完数据刷新后，可以使
用wx.stopPullDownRefresh函数停止当前页面的下拉刷新
onReachBottom （Function）页面上拉触底事件的处理函数，可在app.json的window
选项中或者页面配置中开启onReachBottomDistance事件监听，在
触发距离内滑动期间只会触发一次
onShareAppMessage （Function）用户点击右上角转发按钮的事件处理函数
onPageScroll （Function）页面滚动触发事件的处理函数，参数为Object，包含
scrollTop 字段（Number，页面在垂直方向已滚动的距离px）
onTabItemTap （Function）当前是tab页是，点击tab时触发的事件处理函数，只有
定义了该事件处理函数，右上角菜单才会显示“转发”按钮，此事
件需要return一个Object来定义转发的内容，内容包括 title（
String，当前小程序的名称）、path（String，当前页面的path，
必须是以/开头的完整路径）
（开发者可以添加任意的函数或数据到object参数中，在Page（）的object参数的函数中，
用 this.函数 或者 this.变量 可以访问）
1）getApp（） a.全局函数getApp（）可以用来获取本小程序的实例：var appInstance = getApp（）
b.不能在APP（）参数中的函数里调用，APP（）中使用this来获取app的实例
c.通过getApp（）获取实例后，不能私自调用生命周期函数
2）Page.prototype.route route字段可获取当前页面的路径
3）Page.prototype.setData() setData（）函数用于将数据从逻辑层发送到视图层（异步），同时改变
对应的this.data的值（同步）
setData（）参数格式： data （Object）必须有。这次要改变的数据
callback （Function）回调函数
a）其中data以key，value的形式表示，将this.data中的key对应的值改变成 value。callback是一个
回调函数，在这次setData对界面渲染完毕后调用
b）直接修改this.data变量的值而不调用this.setData（）函数是无法改变页面的状态的，还会造成
数据的不一致
c）单次设置的数据不能超过1024kb，尽量避免一次设置过多的数据
d）把data中任意一项value设为 undefined 会导致该项value不被设置并且可能出现潜在问题
6.page.wxml 构建页面的结构
{{dataName}} 双重大括号表示取dataName变量的值
1）<view> myWord </view> 直接把 myWord 这6个字符打印在页面
2）<view> {{dataName}} </view> 将Page（）中data里定义的dataName变量的值横排打印在页面
3）<view wx:for="{{datName}}"> {{item}} </view> 将Page（）中data里定义的dataName变量的值逐
一竖排打印在页面上（可用作数组列表渲染，字
符串会被当作字符数组逐字符竖排打印）
4）<view wx:if = "{{条件}}"> 内容 </view>
<view wx:elif = "{{条件}}"> 内容 </view>
<view wx:else = "{{条件}}"> 内容 </view> 根据条件表达式算出的Boolean值打印对应的内容
5）<template name = "模板名">
<view> {{aa}},{{bb}} </view>
<view> 样式2 </view>
样式3，样式4....
</template>
<!--接下来调用模板，每调用一次，会提取data里的数据按模板打印一次相关数据-->
<template is = "模板名" data="{{...数据名}}" </template>
Page({
data:{
数据名：{ 键1：值 ，键2：值， ...}
myData：{ aa:10, bb:11, cc:12, ... }
}
})
6）<view bindtap = "事件函数名"> 内容 </view> 绑定事件
7）Page({
click: 0,
data: {
clickTime：0
}
clickFunc:function(){
this.click= this.data.clickTime
console.log(this.click)
this.click=this.click+1
this.setData({ clickTime: this.click })
}
}）
8）<checkbox checked = "{{fals}}"> 标签 </checkbox> 方形勾选toggle，初始为不打钩，标签文字
在方形的右边
9）{{data}} 或 "{{data}}" 中，大括号之间 或者 大括号与引号之间不能有空格，否则会被当成是一
串字符且空格被忽略，而不会取对应的data值,大括号里的空格被忽略不会出现这种问题
10）<view hidden="{{clickTime>=3 ? true : false}}" bindtap='clickFunc'> 字符内容 </view>
可隐藏的字符内容，（点击3次后）hidden="true"时，字符内容将被隐藏
11）一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的
情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。
12）bind、catch： 事件绑定的写法同组件的属性，以 key、value 的形式。
a）key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本
1.5.0 起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、、catch:touchstart。
b）value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。
c）bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
13）引用
<import src="文件名.后缀"> </import> 只引用文件定义的内容，不引用文件引用的文件
<include src="文件名.后缀"></import> 将文件整个代码引入，相当于将文件的代码拷贝到
include的位置
14）<wxs module="模块名"> ---直接在.wxml文件定义模块
变量定义；
函数定义；
module.exports.变量名（函数名）=变量名（函数名，不带参数）
</wxs>
<wxs src="./.../文件名.后缀" module="模块名"> </wxs> ---在.wxs文件定义模块，然后调用
15）exports ：通过该属性，可以对外共享本模块的私有变量和函数
7.page.wxss 用来决定 WXML 的组件应该怎么显示。
1）@import "文件名.wxss"； 导入样式表，@import后跟需要导入的外联样式表的相对路径，
用;表示语句结束。
2）静态的样式统一写到class中。style接收动态的样式，在运行时会进行解析，静态样式写到style里会
影响渲染速度。
<view class=".wxss文件里定义的静态样式名"></view>
7.API （小游戏须下载 weapp-adapter.js 文件复制到项目中）
1）window.reqestAnimationFrame(函数名) 返回每动画帧的请求id，并且在该帧回调函数
2）canvas.getContext("2d" 或 "webgl") 获取2d绘图画布或webgl绘图画布
3）var myImgSrc = "./image/myImage.jpg" 从文件路径获取2d图片资源
var myImg = new Image(); 实例化一个image对象
myImg.src = myImgSrc; 给image对象赋值图片
myImg.onload = function (){
canvas.getContext("2d").drawImage(image对象,image对左上屏角的位置x轴,y轴,image宽,image高)
}
4)myImgSrc.innerWidth / myImgSrc.innerHeight 获取2d图片资源的宽、高
window.innerWidth / window.innerHeight 获取屏幕的宽、高
5）class pool { 只要给定默认值，就可以以不同参数实例化对象，不过参数要
length = 100;
constructor(len = 0,name="") { 按顺序
this.length=len
}
}
var a=new pool()
var b=new pool(5)
console.log(a.length+"/"+b.length)
6）(function(){ 立即执行函数，相当于 function aa(){ };aa();
console.log("aaa")
})()
7）wx.onTouchStart(function(res){ 返回函数里的参数是接收返回数据的返回参数
explosionX=res.touches[0].screenX-715
explosionY = res.touches[0].screenY-265 返回的screenX和screenY值不准，screen是包括边
console.log(explosionX + "/"+explosionY) 框（无画面或者是按钮）的部分
})
8）wx.onTouchMove(function(res){ 返回触摸按下后移动时的位置数据，clientX只包
explosionX = res.touches[0].clientX - 50 括有画面的部分
explosionY = res.touches[0].clientY - 50
//console.log(explosionX + "/" + explosionY)
})
9）var audio="./audio/bgm.mp3"
var bgMusic=wx.createInnerAudioContext()
function bgMusicConfig() { 音效属性设置
bgMusic.src = audio
bgMusic.autoplay = true
bgMusic.loop = true
bgMusic.obeyMuteSwitch=true
}
bgMusicConfig()
bgMusic.play() 音效播放
bgMusic.stop() 音效停止
10）var vi=wx.createVideo() 播放视频（注意：videoplayer版本低的话会报错）
vi.src="./video/1006.mp4"
vi.poster="./image/psb.jpg"
var promise=new Promise(function(resolve,reject){
resolve("视频加载成功")
}).then(function(succesMessage){
console.log("ok"+succesMessage)
}).catch(function(){
console.log("视频加载失败")
})
vi.play("promise")
vi.onEnded(function(){
console.log("视频播到尾")
vi.destroy()
})
11）wx.showShareMenu({
withShareTicket:true
})
wx.onShareAppMessage(function(){
return{
title:"趣看流星语",
imageUrl: canvas.toTempFilePathSync({
destWidth: window.clientWidth,
destHeight: window.clentHeight
})
//imageUrl:"./image/hero.png",
a:console.log("哈哈哈")
}
})
或：
function showShareMenu() {
return new Promise((resolve, reject) => {
wx.showShareMenu({
withShareTicket: true,
success: res => {
console.log("showShareMenu true");
resolve(res);
}
})
})
}
showShareMenu()
12）wx.showModal({
title: '分享',
content: '分享小游戏给朋友即可复活！！',
showCancel:true,
cancelText:"取消",
cancelColor:"#216785",
confirmText:'分享',
success:function(){
wx.shareAppMessage({
title:"分享",
imageUrl:"./image/hero.png"
})
}
})
6354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
