微信小程序开发---hello

一、安装

直接从官网上进行下载，安装过程很简单，omit。

二、开发hello world 小程序

官方文档：（小声逼逼，中文文档看起来真舒服）
小程序中新增/减少页面，都需要对 pages 数组进行修改。则需要在 app.json 中添加（测试了下，好像添加页面，app.json会自动配置路径）

2.1 文件介绍：

js ---------- JavaScrip文件
json -------- 项目配置文件，负责窗口颜色等等
wxml ------- 类似HTML文件
wxss ------- 类似CSS文件

2.2 全局配置

app.json 文件是对微信小程序进行全局配置的。文件内容为一个Json对象，属性具体看官方文档。记录了页面组成，配置小程序的窗口 背景色，配置导航条样式，配置默认标题。
app.js在这个文件中监听并处理小程序的生命周期函数、声明全局变量。
app.wxml 非必须。
app.wxss 非必须，全局CSS样式文件。

在app.js中添加代码

App({
  onLaunch: function () {
    console.log('App Launch')
    //生命周期函数--监听小程序初始化，全局只初始化一次
  },
  onShow: function () {
    console.log('App Show')
    //生命周期函数--监听小程序显示；当小程序启动，或从后台进入到前台显示，
    //会触发onShow()
  },
  onHide: function () {
    console.log('App Hide')
    //生命周期函数--监听小程序隐藏；当小程序从前台进入后台，会触发
  }
})

在app.json中添加代码：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
   
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#BBDEF8",
    "navigationBarTitleText": "Hello World",
    "navigationBarTextStyle": "white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

在index.js中添加代码:

Page({
  data:{
    // text:"这是一个页面"
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

在index.wxml添加代码：

<view>
    <text class="window">Hello</text>
</view>

在index.wxss中添加代码：

.window{
  color: fuchsia;
}

最后呈现效果：

summary：
app相当于全局配置
index相对于页面设置

三、变色字体Hello

在上面的基础上更改：
在index.js中修改代码:

var flag =true;
Page({
  data:{
    color:"window"
    // text:"这是一个页面"
  },
  click:function(){
    console.log("点击了文字");
      if(flag){
        this.data.color="window-red";
        flag=false;
      }else{
        this.data.color="window";
        flag=true;
      }
      this.setData({
        color:this.data.color
      });
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

在index.wxml中添加代码：

<view>
    <text catchtap="click" class="{{color}}">Hello</text>
</view>

在index.wxss中添加代码：

.window{
  color:aqua;
}
.window-red{
  color:red;
}