按照微信小程序的步骤简单开发微信小程序，首先建立一个开发环境

查看第一个目录

日志

1.写代码

1. 1创建一个小程序实例

让我们介绍以上文章的功能：

app.js是小程序的脚本代码

app.json是微信小程序的全局配置文件。在此文件中，我们可以配置小程序组成的页面。

配置小程序的窗口背景颜色

配置导航栏样式

配置默认标题

注意：不能在此文件中添加任何评论

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

？

导航栏样式（这是导航栏的背景颜色）

xt导航栏标题（这是导航栏的文本内容）

导航栏文本样式（这是字体的颜色）

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创建页面

在此示例中，我们有两个页面和日志页面，即小程序启动日志的欢迎页面和显示页面。它们都在目录下，并且微信小程序每页的[path + page name]是它需要写在app.json中，并且它的第一页是的主页。

每个小程序页面由四个文件组成，这些文件在相同的路径下具有相同的名称：

//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 }) }) } })

.wxss（样式文件）

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

页面样式不是必需的。如果未设置样式，则可以使用全局app.wxss样式。设置样式后，它将覆盖app.wxss样式。

.json（配置文件）

在两种情况下，页面上的配置文件与上面相同。

日志页面结构

<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>

日志页面使用控制标签来组织正在使用的代码

wx: for

绑定日志数据，然后将日志数据循环展开。

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)) }) }) } })