认识小程序代码结构

开发一个小程序的第一步是先熟悉小程序。
在微信公众平台的首页可以下载到小程序的开发工具
下载安装后选择建立快速模版可得到模版目录。接下来我们就来看一下小程序的目录结构

image.png

app.js······全局js文件，如果你有全局变量或者全局的方法都可以写在这里
app.json····全局属性文件，在这里可以配置小程序的全局属性，如全局顶部菜单颜色
app.wxss···全局css样式写在这里
project.config.json···项目配置文件。

我们用index页面来更详细的了解一下，该怎么写小程序

首先来看index.wxml
小程序的wxml页面省略了html页面的基础结构，简单粗暴直接用一个个的view标签来创建页面的元素

<view class="container">

  <view class="userinfo">

    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>

    <block wx:else>

      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>

      <text class="userinfo-nickname">{{userInfo.nickName}}</text>

    </block>

  </view>

  <view class="usermotto">

    <text class="user-motto">{{motto}}</text>

  </view>

</view>

接下来是index.wxss
wxss是小程序的样式文件、css样式都是写在这个文件

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

然后是index.js
js文件控制页面动作，如跳转提交等
我们的变量、函数都是要写在page({ })里面

//index.js
//获取应用实例
const app = getApp()

Page({
  data: { //定义变量
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({ //跳转方法
      url: '../logs/logs'
    })
  },
  onLoad: function () {
   //页面打开时调用
  },

})

josn文件我们用app.josn举例子
如果是页面对应的josn文件，我们只需要把window里的代码写进去就可以

{
  "pages":[
    "pages/index/index", //注册页面，我们每新建页面都要在这里注册一下
    "pages/logs/logs"   //没有注册的页面是不能访问的，
      //小程序会根据你创建的页面自动注册
      //所以我们只要注意删除页面的时候要把这里对应的代码也删除
  ],
  "window":{
    "backgroundTextStyle":"light", //顶部菜单栏字体样式
    "navigationBarBackgroundColor": "#fff", //顶部菜单栏颜色
    "navigationBarTitleText": "WeChat",   //顶部菜单栏标题文字
    "navigationBarTextStyle":"black"  //顶部菜单栏文字颜色
  }
}