版权声明：未经博主允许不得转载
前言：
学习微信小程序应该不怎么难吧~下面我来记录一下学习笔记，在学微信小程序的时候，如果你有html+css+javascript的基础，那么你就很快地上手掌握的。下面提供微信小程序官方地址：https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html
下面一起学一学，微信小程序的框架吧~看文档，别学别理解。在下的讲述如果不正确的话，可以参考官方文档，也可以帮忙改正。具体还得看官方文档。
正文：
微信小程序的文件结构，有一个描述整体的app和描述多个页面的文件组合在一起的。给大家看一下打开微信小程序一般由什么：
一个文件项目中主体有
app.js 为小程序的逻辑代码
app.json 为小程序的公共设置
app.wxss 为小程序的样式
一个文件中如logs,index等，一般都有
xxx.js 页面逻辑代码如JavaScript
xxx.wxml 如html
xxx.wxss 如css样式
json 为该页面的配置
在app.json中的代码，我提供的代码是刚创建时的代码模块：
{
//这部分为页面的路径
"pages":[
"pages/index/index",
"pages/logs/logs"
],
//窗口表现
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
在文档中还提供了tabBar，networkTimeout等。
tabBar
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}]
}
networkTimeout网络超时
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
window的属性：
（navigationBar-BackgroundColor）
navigationBarBackgroundColor为导航栏的背景颜色
（navigationBar-TextStyle）
navigationBarTextStyle为导航栏标题颜色
仅支持 black/white
（navigationBar-TitleText）
navigationBarTitleText为导航栏标题文字内容
navigationStyle为导航栏样式
仅支持 default/custom
backgroundColor窗口的背景色
backgroundTextStyle下拉 loading 的样式，仅支持 dark/light
tabBar可以切换页面（最少2，最多5）
color文字颜色
selectedColor文字选中时的颜色
backgroundColor背景色
borderStyle 仅支持 black/white
iconPath
selectedIconPath
networkTimeout设置各种网络请求
wx.request
wx.connectSocket
xxx.json：
navigationBarBackgroundColor
navigationBarTextStyle
navigationBarTitleText
backgroundColor
backgroundTextStyle
等
App()
用来注册小程序。生命周期函数
onLaunch
onShow
onHide
onError
object 参数说明：
data:初始数据
生命周期函数
onLoad
onReady
onShow
onHide
onUnload
组是视图的基本组成单元。
知识点：
数据绑定
Page({
data: {
...
}
})
列表渲染：
<view wx:for="{{array}}"> {{item}} </view>
条件渲染
模板
数据绑定
{{ message }}
"{{flag ? true : false}}"
wx:for
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
//wx:for="{{[1, 2, 3]}}"
<view> {{index}}: </view>
<view> {{item}} </view>
提供两种文件引用方式import和include。
标识符
delete
void
typeof
null
undefined
NaN
Infinity
var
if
else
true
false
require
this
function
arguments
return
for
while
do
break
continue
switch
case
default
数据类型
1. number ： 数值
toString
toLocaleString
valueOf
toFixed
2. string ：字符串
3. boolean：布尔值
toString
valueOf
4. object：对象
5. function：函数
6. array : 数组
7. ate：日期
8. regexp：正则
选择器
view::after 在 view 组件后边插入内容
view::before 在 view 组件前边插入内容
组件
view视图容器
scroll-view滚动视图
swiper滑块视图容器
movable-area可移动区域
movable-view可移动的视图容器
cover-view覆盖在原生组件之上的文本视图
cover-image覆盖在原生组件之上的图片视图
rich-text富文本
label用来改进表单组件的可用性
picker从底部弹起的滚动选择器
picker-view嵌入页面的滚动选择器
navigator页面链接
functional-page-navigator用于跳转到插件功能页
live-player实时音视频播放
live-pusher实时音视频录制
如果觉得不错，那就点个赞吧！❤️
我的目标是——每天不断更