微信小程序开发（一）-简易教程

按照微信小程序的步骤，先搭建一个开发环境
看一下最开始的目录

pages

• index

  • index.js
  • index.json
  • index.wxml
  • index.wxss

• logs

  • logs.js
  • log.json
  • log.wxml
  • log.wxss

utils

• utils.js
  app.js
  app.json
  app.wxss

1.编写代码
1.1创建小程序实例
我们介绍一下上面文章的作用：
app.js是小程序的脚本代码
app.json是微信小程序全局的配置文件，我们可以在这个文件中配置小程序是由哪些页面组成的。
配置小程序的窗口背景色
配置导航条样式
配置默认标题
注意：该文件不可以添加任何注释

{
    "pages":[
        "pages/index/index",
        "pages/logs/logs"
    ]
    "window":{
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#3cc51f",
        "navigationBarTitleText": "图吧公交",
        "navigationBarTextStyle": "#fff"
    }
}

backgroundTextStyle ?
navigationBarBackgroundColor 导航条样式（这里是导航条的背景颜色）
navigationBarTitleText 导航条标题（这里是导航条的文本内容）
navigationBarTextStyle 导航条文本样式（这里是字体的颜色）

app.wxss 是整个小程序的公共样式,是全局的，其他任何地方都可以用到此样式。

.container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-coentent: center;
    align-items: center;
    box-sizing: border-box;
    padding: 200rpx 0;
}

1.2创建页面
在这个例子中，我们有两个页面index和logs页面，即欢迎页面和小程序启动日志的展示页，它们都是pages目录下，微信小程序的每一个页面的【路径+页面名】都需写在app.json的pages中，且pages中的第一个页面是小程序的首页。

每一个小程序页面都由四个同路径下的同名文件组成：

• index.js （脚本文件）
• index.json （配置文件）
• index.wxml （结构文件）

• index.wxss （样式文件）

  index.js（脚本文件）

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

index.wxss（样式文件）

.center{
    display: flex;
    justify-content: center;
    align-items: center;
}

页面的样式不是必要的，在没有设置样式的时候，可以用全局中app.wxss样式。当设置了样式时，它会覆盖app.wxss样式。

index.json（配置文件）
页面中的配置文件同上，也是两种情况。

logs的页面结构

<!--logs.wxml-->
<view class="container log-list">
  <block wx:for="{{logs}}" wx:for-item="log" wx:key="*this">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view>

logs页面使用控制标签来组织代码，在block使用

wx: for

绑定logs数据，并将logs数据循环展开节点。
logs.js

//logs.js
var util = require('../../utils/util.js')
Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(function (log) {
        return util.formatTime(new Date(log))
      })
    })
  }
})