微信小程序开发-入门基础

微信小程序基本目录

pages:主要存放小程序的页面文件，其中每个文件夹为一个页面，每个页面包含四个文件，.wxml文件是界面文件，.js是事件交互文件，用于处理界面的点击事件等功能；.wxss为界面美化文件，让界面显示的更加美观；.json为配置文件，用于修改导航栏显示样式等，小程序每个页面必须有.wxml和.js文件，其他两种类型的文件可以不需要。
注意：文件名称必须与页面的文件夹名称相同，如index文件夹，文件只能是index.wxml、index.wxss、index.js和index.json.
index为第一个界面,app.js,app.json,app.css为全局配置文件,index.logs下为局部配置.

app.json文件如下,pages下内容决定首先显示哪个界面,我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#03bbd5",
    "navigationBarTitleText": "hello",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh":true,
    "backgroundColor":"#ccc"
  }
}

app.json其中”window”:中可更改的内容参考
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

微信小程序跳转页面

1，在wxml页面中：

<navigator url="../index/index">跳转到新页面</navigator>

2，在js页面中：

定位实现地图布局

index.wxml文件如下

<view>
    <view class="mapArea">
    <map 
    id="map" 
    longitude="113.324520" 
    latitude="23.099994" 
    scale="10" 
    controls="{{controls}}" 
    bindcontroltap="controltap" 
    markers="{{markers}}" 
    bindmarkertap="markertap" 
    polyline="{{polyline}}" 
    bindregionchange="regionchange" 
    show-location style="width: 100%; height: 100%;"></map>
    </view>
    <!-- <button bindtap="bindViewTap">tap</button> -->
    <view class="nav">
        <view class="publish"><navigator url="../logs/logs">发布</navigator></view>
        <view class="search">搜索</view>
    </view>
</view>

index.wxss文件如下

.nav
{ 
  height: 42px;
  width: 100%;
  position: absolute;
  /* top: 100%; */
  bottom: 0px;
  display: flex;
  color: #fff;
}
.mapArea{
  /* height: 500px; */
  bottom: 42px;  
  width: 100%;
  top: 0px;
  left: 0px;
  right: 0px;
  position: absolute;
  /* background-color: black; */
}
.publish,.search{
  text-align: center;
  line-height: 42px;
  height: 42px;
  flex: 1; /*占用1/2,当改成2时,则占用2/3*/

}
/* 以下的内容可以整合到上方.publish,.search{}中 */
.publish
{
  background-color: #ff9700;
  /* width: 50%; */ 
  /* float: left;  当下方方块多了的时候就不好用了*/
}
.search
{
  text-align: center;
  line-height: 42px;
  /* width: 50%; */
  background-color: #03bbd5;
  height: 42px;
  /* float: right; */
  flex: 1;
}

盒模型

新建目录

在微信开发者工具app.json中添加”pages/comingsoon/comingsoon”,然后保存即可

"pages":[
    "pages/index/index",
    "pages/comingsoon/comingsoon",
    "pages/logs/logs"
  ],