app
web app ：内嵌浏览器打开指定网页
native app：原生开发的app，也就是使用ios和Android开发
hybrid app：混合app开发，写div+css+js+php开发
环境搭建
- 开发者工具下载
- 第一次打开后扫码登录，开始开发小程序，设置项目存放路径和appid（项目上线必填，开发阶段可以忽略）
目录介绍
- 小程序由多个页面组成 ，每个页面由几个核心文件，分别为逻辑代码（js），页面结构（wxml），页面样式（wxss），页面配置（json）
- app.json全局配置文件
用于声明当前小程序有几个页面，默认打开第一个声明的页面
"pages":[
"pages/index/index",
"pages/logs/logs"
],
声明小程序的界面配置，如标题，标题颜色，背景
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
- util.js全局工具文件，封装js代码
- app.js全局的js代码，在该文件里面所写的代码在所有页面都会触发
- app.wxss全局的css文件
思想
- 显示静态界面，数据动态化（js发送异步请求获取数据，遍历显示数据）
创建页面
view标签，相当于 div
数据绑定
在js中的data中声明数据，在wxml中使用{{}}（类似vue）绑定数据
使用wx:for控制绑定一个数组（类似vue中的v-for）
使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标：
实现一个简单的笑话小程序
- 在app.json中配置底部导航栏,配置页面的路径和导航栏图标的路径（即使没有配置图标也要写出来为空）
"tabBar":{
"color":"green",
"selecteColor":"#fffffff",
"borderStyle":"white",
"list":[
{
"text":"笑话",
"pagePath":"pages/joke/joke",
"iconPath":"",
"selectedPath":""
},
{
"text": "图片",
"pagePath": "pages/picture/picture",
"iconPath": "",
"selectedPath": ""
}
]
}
onLoad: function (options) {
var thatObj=this;
wx.request({
url: 'https://v.juhe.cn/joke/content/text.php?key=2ca3e19979fadf2279ac6a036669f5ad&page=1&pagesize=10', // 仅为示例，并非真实的接口地址
success(res) {
thatObj.setData({
jokeList: res.data.result.data
})
console.log(res.data.result.data)
}
})
},
