初步接触微信小程序

app

web app ：内嵌浏览器打开指定网页
native app：原生开发的app，也就是使用ios和Android开发
hybrid app：混合app开发，写div+css+js+php开发

---

环境搭建

1. 开发者工具下载
2. 第一次打开后扫码登录，开始开发小程序，设置项目存放路径和appid（项目上线必填，开发阶段可以忽略）

---

目录介绍

1. 小程序由多个页面组成 ，每个页面由几个核心文件，分别为逻辑代码（js），页面结构（wxml），页面样式（wxss），页面配置（json）
2. app.json全局配置文件
   用于声明当前小程序有几个页面，默认打开第一个声明的页面

"pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],

声明小程序的界面配置，如标题，标题颜色，背景

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }

3. util.js全局工具文件，封装js代码
4. app.js全局的js代码，在该文件里面所写的代码在所有页面都会触发
5. app.wxss全局的css文件

---

思想

• 显示静态界面，数据动态化（js发送异步请求获取数据，遍历显示数据）

---

创建页面

view标签，相当于 div

---

数据绑定

在js中的data中声明数据，在wxml中使用{{}}（类似vue）绑定数据
使用wx:for控制绑定一个数组（类似vue中的v-for）
使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标：

---

实现一个简单的笑话小程序

1. 在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)
      }
    })

  },