初始化微信小程序

page下的目錄都可以刪除。

app之下的文件都不能刪除。

 

1.index.js

 

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    x:0,
    y:0,
    latitude: 23.099994,
    longitude: 113.324520,
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function(options) {

  },

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function() {

  },

  /**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function() {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function() {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage() {
    return {
      title: 'cover-view',
      path: 'page/component/pages/cover-view/cover-view'
    }
  },
  tap:function(e){
    this.setData({
      x:30,
      y:30
    });
  },
  onChange:function(e){
    console.log(e.detail);
  },
  onScale:function(e){
    console.log(e.detail);
  }
})

 

2.index.json

 

{
  "usingComponents": {}
}

 

3.index.wxml

類似於HTML中body里面的顯示標簽。

view類似div ,  map是加載地圖,latitude 經度 longitude 緯度。

<!--index.wxml-->
<view>程序開始了</view>
<view class="container">
  <view class="page-body">
    <view class="page-section page-section-gap">
      <map style="width: 100%; height: 300px;" latitude="{{latitude}}" longitude="{{longitude}}">

      </map>
    </view>
  </view>
</view>

<view class="section">
  <view class="section__title">movable-view區域小於movable-area</view>
  <movable-area style="height: 200px; width: 200px; background: red;">
    <movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}" direction="all">
    </movable-view>
  </movable-area>
</view>

4.index.wxss

類似於css文件

/**index.wxss**/
/* 沒有通配符選擇器 */
.cover-view {
  position: absolute;
  top: calc(50% - 150rpx);
  left: calc(50% - 300rpx);
  /* opacity: .7; */
}

.flex-wrp{
  display:flex;
}

.flex-item{
  width: 200rpx;
  height: 300rpx;
  font-size: 26rpx;
}

 

5.app.json

pages用於存放跳轉的頁面。

"enablePullDownRefresh":true    用於下拉刷新

"backgroundTextStyle":"dark"   下拉后顯示的樣式

"navigationBarBackgroundColor":"#f40"   導航欄的背景顏色。

"navigationVarTextStyle":"white"    導航欄內容的顏色。

{
  "pages": [
    "pages/index/index",　　　
    "pages/shouye/shouye"   
  ],
  "window": {
    "enablePullDownRefresh":true,
    "navigationBarBackgroundColor": "#f40",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "dark"
  },
  "sitemapLocation": "sitemap.json"
}