山东大学项目实训——地图圈系统——微信小程序（1）

一、微信开发者工具下载

1.首先下载微信开发者工具https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2.根据提示进行下一步安装

3.安装完成后打开开发者工具，新建项目，点击注册AppID

4.注册完成后新建一个小程序

红线内填写刚注册的AppID，就可以建成自己的第一个小程序项目了。

二、对小程序各个文件作用解释

文件名	作用
pages文件	页面文件，保存所有小程序相关页面
index文件	具体的页面，位于pages文件之下
logs文件	具体的页面，位于pages文件之下
index.js	页面逻辑文件，可以写各种函数
index.json	页面配置文件
index.wxml	页面布局文件，类似网页的html
index.wxss	页面样式文件，语法类似css文件
utils文件	工具包，可存放全局的js文件，用于全局调用
app.js	小程序入口，用于定义全局数据和函数的使用，可以指定微信小程序的生命周期函数
app.json	对小程序进行配置，小程序的所有页面路径、界面表现、网络超时时间、底部 tab
app.wxss	全局的样式文件
project.config.json	保存开发工具配置项
sitemap.json	可以对小程序进行seo优化，让搜索排名靠前

三、小程序生命周期

1.小程序应用生命周期

2.小程序页面生命周期

四、写自己的第一个页面

1.在pages文件下新建一个目录为newpage
2.在newpage文件下新建一个page文件为newpage，文件结构如下：

3.在newpage.wxml文件下写如下代码：

<view class="container">
  <image style="width:100%" src="http://pic.962.net/up/2016-2/2016020508565251157.gif"></image>
  <text >Hello,my dear!</text>
  <view>
    <text>进入小程序</text>
  </view>
</view>

4.添加编译模式如下：pages/newpage/newpage

5.点击编译，查看自己小程序运行效果

6.通过自己修改newpage.wxss文件，控制不同组件的样式,此时的wxml文件代码为（修改哪一个组件，就在哪一个组件里面添加class代码）：

<view class="container">
  <image style="width:100%" src="http://pic.962.net/up/2016-2/2016020508565251157.gif"></image>
  <text class="name">Hello,my dear!</text>
  <view >
    <text class="name2">进入小程序</text>
  </view>
</view>

newpage.wxss文件代码为：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #b3d4db;
  height: 1300rpx;
  background-image: url("http://www.vokeycar.cn/%E6%89%8B%E6%9C%BA%E9%AB%98%E6%B8%85%E5%8A%A8%E6%80%81%E5%A3%81%E7%BA%B8/");
}

.name {
  font-size: 45rpx;
  font-family: MicroSoft Yahei;
  font-weight: bold;
  margin-top: 100rpx;
}

.name2 {
  font-size: 45rpx;
  font-family: MicroSoft Yahei;
  color: #405f80;
}

此时再次编译运行，小程序页面如下图：

这个周主要是把小程序的各个文件作用搞清楚，为以后写地图圈系统做好铺垫，持续更新ing…