微信小程序入门(二)

5.安装微信开发者工具

小程序入口文档

点“小程序开发”-->>"工具-->>再点左边的“下载”,进行开发者工具的下载

微信小程序入门(二)

6.小程序代码结构简介

登陆开发者工具,创建小程序项目

微信小程序入门(二)

目录结构

微信小程序入门(二)

7.小程序配置文件介绍

全局配置app

  • Pages
  • tabBar
  • networkTimeout
  • debug
  • navigationStyle

单个页面配置page

  • navigationBarBackgroundColor
  • navigationBarTextStyle
  • navigationBarTitleText
  • onReachBottonDistance
  • enablePullDownRefresh
  • disableScroll

8,9.开发者工具详解

创建一个'helloworld'的小程序,不使用模板

微信小程序入门(二)

开发者工具界面

微信小程序入门(二)

小程序版本

  • 预览版本
  • 体验版本
  • 开发版本
  • 审核版本
  • 线上版本

10.创建第一个小程序

创建几个文件

app.js

作用:帮我们注册一个微信小程序的应用
先写成空

App({})

app.json

作用:是对我们微信小程序应用的一个全局配置
pages里面是目录

{
  "pages":[
    "pages/helloworld/helloworld"
  ]
}

helloworld.wxml

作用:wxml文件就是描述我们页面上要有哪些内容,类似HTML

<view>Hello World!</view>

hellorworld.js

作用:是帮助我们去注册一个微信小程序的页面
先写空

Page({})

helloworld.json

作用:页面的一些配置信息
先写空

{}

helloworld.wxss

作用:用来描述小程序的一个样式,类似css

view{
   100%;
  height: 40rpx;
  text-align: center;
  color: blue;
}

目录结构和运行效果

微信小程序入门(二)