微信小程序入门

{
  "pages": ["pages/index/index", "pages/logs/logs"]
}

{
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

"tabBar": {
 "color": "#00A95E",
 "selectedColor": "#FA8072",
 "backgroundColor": "#f5f5f5",
 "borderStyle": "black",
 "list": [
  {
   "pagePath": "pages/index/index",
   "text": "Index",
   "iconPath": "icon/_home.png",
   "selectedIconPath": "icon/home.png"
  },
  {
   "pagePath": "pages/logs/logs",
   "text": "Logs",
   "iconPath": "icon/_search.png",
   "selectedIconPath": "icon/search.png"
  },
  {
   "pagePath": "pages/demo/demo",
   "text": "Demo",
   "iconPath": "icon/_videocamera.png",
   "selectedIconPath": "icon/videocamera.png"
  }
 ]
}

/** common.wxss **/
.small-p {
  padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

<view style="color:{{color}};" />

<view class="normal_view" />

<view class="wrapper" hover-class="wrapper-hover" hover-stay-time="1000">我的第一个微信程序</view>

.wrapper{
 width: 100%;
 height: 100rpx;
 text-align: center;
 line-height: 100rpx;
 background-color: skyblue;
}

.wrapper-hover {
 background-color: pink;
}

<view class="container">
  <view class="page-body">
    <view class="page-section">
      <view class="page-section-title">
        <text>flex-direction: row</text>
        <text>横向布局</text>
      </view>
      <view class="page-section-spacing">
        <view class="flex-wrp" style="flex-direction:row;">
          <view class="flex-item demo-text-1"></view>
          <view class="flex-item demo-text-2"></view>
          <view class="flex-item demo-text-3"></view>
        </view>
      </view>
    </view>
    <view class="page-section">
      <view class="page-section-title">
        <text>flex-direction: column</text>
        <text>纵向布局</text>
      </view>
      <view class="flex-wrp" style="flex-direction:column;">
        <view class="flex-item flex-item-V demo-text-1"></view>
        <view class="flex-item flex-item-V demo-text-2"></view>
        <view class="flex-item flex-item-V demo-text-3"></view>
      </view>
    </view>
  </view>
</view>

.container {
 margin-top: 80px;
}

.flex-wrp {
 display: flex;
}

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

.flex-item-V {
 margin: 0 auto;
 width: 300rpx;
 height: 200rpx;
}

.page-section-title text {
 line-height: 36px;
}

.demo-text-1 {
 position: relative;
 align-items: center;
 justify-content: center;
 background-color: #1AAD19;
 color: #FFFFFF;
 font-size: 36rpx;
}

.demo-text-1:before {
 content: 'A';
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

.demo-text-2 {
 position: relative;
 align-items: center;
 justify-content: center;
 background-color: #2782D7;
 color: #FFFFFF;
 font-size: 36rpx;
}

.demo-text-2:before {
 content: 'B';
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

.demo-text-3 {
 position: relative;
 align-items: center;
 justify-content: center;
 background-color: #F1F1F1;
 color: #353535;
 font-size: 36rpx;
}

.demo-text-3:before {
 content: 'C';
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

<text>啦啦啦啦</text>

<swiper class="banner">
  <swiper-item>item1</swiper-item>
  <swiper-item>item2</swiper-item>
  <swiper-item>item3</swiper-item>
</swiper>

.banner{
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
}

const food = [
 'https://img1.baidu.com/it/u=3033226715,2238019049&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
 'https://img1.baidu.com/it/u=1948650034,2409824853&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675',
 'https://img2.baidu.com/it/u=3016274568,4110305242&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313',
 'https://img2.baidu.com/it/u=2364493189,83457107&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
]

Page({
 data: {
  food
 },
})

<view style="height: 400rpx;">
 <swiper class="banner" indicator-dots>
  <swiper-item wx:for="{{food}}" wx:key="*this">
   <image class="img" src="{{item}}" mode="aspectFill" />
  </swiper-item>
 </swiper>
</view>

.banner {
 height: 100%;
 width: 100%;
 text-align: center;
 line-height: 80rpx;
}

<view class="container">
  <view class="page-body">
    <view class="page-section">
      <view class="page-section-title">
        <text>Vertical Scroll</text>
        <text>纵向滚动</text>
      </view>
      <view class="page-section-spacing">
        <scroll-view type="list" scroll-y="true" style="height: 300rpx;">
          <view id="demo1" class="scroll-view-item demo-text-1"></view>
          <view id="demo2"  class="scroll-view-item demo-text-2"></view>
          <view id="demo3" class="scroll-view-item demo-text-3"></view>
        </scroll-view>
      </view>
    </view>
    <view class="page-section">
      <view class="page-section-title">
        <text>Horizontal Scroll</text>
        <text>横向滚动</text>
      </view>
      <view class="page-section-spacing">
        <scroll-view type="list" class="scroll-view_H"  scroll-x="true" bindscroll="scroll" style="width: 100%;height: 300rpx;">
          <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
          <view id="demo2"  class="scroll-view-item_H demo-text-2"></view>
          <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
        </scroll-view>
      </view>
    </view>
  </view>
</view>

Page({
  tapMove() {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})

.container {
 margin-top: 80px;
}

.page-section-spacing {
 margin-top: 60rpx;
}

.scroll-view_H {
 white-space: nowrap;
}

.scroll-view-item {
 height: 300rpx;
}

.scroll-view-item_H {
 display: inline-block;
 width: 100%;
 height: 300rpx;
}

.demo-text-1 {
 position: relative;
 align-items: center;
 justify-content: center;
 background-color: #1AAD19;
 color: #FFFFFF;
 font-size: 36rpx;
}

.demo-text-1::before {
 content: 'A';
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

.demo-text-2 {
 position: relative;
 align-items: center;
 justify-content: center;
 background-color: #2782D7;
 color: #FFFFFF;
 font-size: 36rpx;
}

.demo-text-2::before {
 content: 'B';
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

.demo-text-3 {
 position: relative;
 align-items: center;
 justify-content: center;
 background-color: #F1F1F1;
 color: #353535;
 font-size: 36rpx;
}

.demo-text-3::before {
 content: 'C';
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

<!-- scroll-view -->
<scroll-view class="myScroll" scroll-x>
 <view class="myScroll.row">1</view>
 <view class="row">2</view>
 <view class="row">3</view>
 <view class="row">4</view>
 <view class="row">5</view>
 <view class="row">6</view>
 <view class="row">7</view>
 <view class="row">8</view>
</scroll-view>

.myScroll {
 width: 100%;
 height: 220rpx;
 background: #eee;
 /* 使文本在不换行的情况下继续显示 */
 white-space: nowrap;
}

.myScroll .row {
 width: 220rpx;
 height: 220rpx;
 background: burlywood;
 margin-right: 20rpx;
 display: inline-block;
}

.myScroll .row:last-child {
 margin-right: 0;
}

<icon type="success"></icon>
<icon type="success" size="50"></icon>
<icon type="warn"></icon>

<progress percent="20" show-info />
<progress percent="40" stroke-width="12" />
<progress percent="60" color="pink" />
<progress percent="80" active />

<button size="default">按钮1</button>
<button size="mini">按钮2</button>
<button size="mini" type="primary">按钮3</button>
<button size="mini" type="warn">按钮3</button>
<button size="mini" type="primary" open-type="share">按钮4</button>

<!-- 
  navigator组件相当于HTML的超链接标签。
    target属性：在哪个目标上发生跳转，默认self-当前小程序；
    url属性：当前小程序内的跳转链接
    open-type属性：指定跳转方式，默认是navigate
      navigate：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
      redirect：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
      switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
      reLaunch：关闭所有页面，打开到应用内的某个页面
      navigateBack：关闭当前页面，返回上一页面或多级页面。
 -->
<navigator target="self" url="../about/about" open-type="switchTab">点我跳转</navigator>

<!-- 导航 
跳转到页面，都不写后缀名
1、open-type='navigate' 跳转方式:
保留当前页面，跳转应用内的某个页面，但不跳转tabber页面
2、open-type="redirect 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。 没返回，有返回首页
3、open-type="switchTab"  跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
4、reLaunch 关闭所有页面，打开到应用内的某个页面
5、navigateBack 关闭当前页面，返回上一页面或多级页面。标签的话，就是返回上一页。用方法的话，可以指定返回多少级
6、exit	退出小程序，`target="miniProgram"`时生效 需要用真机去测

-->
<navigator url="../detail/detail">进入详情页</navigator>
<navigator url="../detail/detail" open-type="redirect">redirect 进入详情页</navigator>
<navigator url="../index/index" open-type="switchTab">跳转到首页</navigator>
<!-- 还可以调tabBar -->
<navigator url="../detail/detail" open-type="reLaunch">reLaunch 到详情页</navigator>
<navigator open-type="exit" target="miniProgram">退出小程序</navigator>

<!-- 
  latitude：维度
  longitude：经度
 -->
<map longitude="115" latitude="39"></map>

<!-- This is our View -->
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>

// This is our App Service.
// This is our data.
var helloData = {
  name: 'Weixin'
}

// Register a Page.
Page({
  data: helloData,
  changeName: function(e) {
    // sent data change to view
    this.setData({
      name: 'MINA'
    })
  }
})

// app.js
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
}

// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})

// common.js
function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

// app.js
App({
  globalData: 1
})
// a.js
// The localValue can only be used in file a.js.
var localValue = 'a'
// Get the app instance.
var app = getApp()
// Get the global data and change it.
app.globalData++
// b.js
// You can redefine localValue in file b.js, without interference with the localValue in a.js.
var localValue = 'b'
// If a.js it run before b.js, now the globalData shoule be 2.
console.log(getApp().globalData)

<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js
Page({
  data: {
    view: 'MINA'
  }
})

<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

//<view class="{{flag?'red':'green'}}">是否加样式</view>
data: {
    flag: false,
},

// Register a Page.
Page({
 data: helloData,
 changeName: function (e) {
  // sent data change to view
  console.log(this.data)
  this.data.name = this.data.name === 'Weixin' ? 'xxx' : 'Weixin'
  this.setData({
   name: this.data.name
  })
 }
})

<!--wxml-->
<wxs module="m1">
var msg = "hello world";

module.exports.message = msg;
</wxs>

<view> {{m1.message}} </view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
  }
})
<!--wxml-->
<!-- 下面的 getMax 函数，接受一个数组，且返回数组中最大的元素的值 -->
<wxs module="m1">
var getMax = function(array) {
  var max = undefined;
  for (var i = 0; i < array.length; ++i) {
    max = max === undefined ?
      array[i] :
      (max >= array[i] ? max : array[i]);
  }
  return max;
}

module.exports.getMax = getMax;
</wxs>

<!-- 调用 wxs 里面的 getMax 函数，参数为 page.js 里面的 array -->
<view> {{m1.getMax(array)}} </view>

<input value="{{value}}" />

<input model:value="{{value}}" />

<input model:value="值为 {{value}}" />
<input model:value="{{ a + b }}" />

<input model:value="{{ a.b }}" />

<input model:value="{{name}}" bindinput="textCallback"/>

<!-- js -->
Page({
 data: helloData,
 changeName: function (e) {
  // sent data change to view
  console.log(this.data)
  this.data.name = this.data.name === 'Weixin' ? 'xxx' : 'Weixin'
  this.setData({
   name: this.data.name
  })
 },
 textCallback: function () {}
})

// custom-component.js
Component({
  properties: {
    myValue: String
  }
})
<!-- custom-component.wxml -->
<input model:value="{{myValue}}" />

<custom-component model:my-value="{{pageValue}}" />

// custom-component.js
Component({
  properties: {
    myValue: String
  },
  methods: {
    update: function() {
      // 更新 myValue
      this.setData({
        myValue: 'leaf'
      })
    }
  }
})

<custom-component model:my-value="{{pageValue}}" />

{
  "pageOrientation": "auto"
}

{
  "initialRenderingCache": "static"
}

{
  "window": {
    "initialRenderingCache": "static"
  }
}

<view wx:if="{{loading}}">正在加载</view>

// 正确的做法
Page({
  data: {
    loading: true
  }
})

// 错误的做法！不要这么做！
Page({
  data: {},
  onLoad: function() {
    this.setData({
      loading: true
    })
  }
})

{
  "initialRenderingCache": "dynamic"
}

Page({
  data: {
    loading: true
  },
  onReady: function() {
    this.setInitialRenderingCache({
      loadingHint: '正在加载' // 这一部分数据将被应用于界面上，相当于在初始 data 基础上额外进行一次 setData
    })
  }
})
<view wx:if="{{loading}}">{{loadingHint}}</view>

{
  "tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "page/component/index",
      "text": "组件"
    }, {
      "pagePath": "page/API/index",
      "text": "接口"
    }]
  },
  "usingComponents": {}
}

<view class="tabbar">
 <view class="tabbar-item {{ select === index ? 'tabbar-select' : '' }}" wx:for="{{ list }}" wx:key="index" data-page="{{ item.pagePath }}" data-index="{{ index }}" data-type="{{ item.type }}" bindtap="selectPage">
  <block wx:if="{{ item.type === 0 }}">
   <image class="tabbar-image" src="{{ select === index ?  item.selectedIconPath : item.iconPath }}"></image>
   <text class="tabbar-text">{{ item.text }}</text>
  </block>
  <block wx:else>
   <view class="publish">
    <image class="tabbar-image" src="../images/add.png"></image>
   </view>
  </block>
 </view>
</view>

Component({
 data: {
  select: 0,
  list: [
   {
    iconPath: "/images/index.png",
    pagePath: "/pages/index/index",
    selectedIconPath: "/images/index_fill.png",
    text: "首页",
    type: 0
   },
   {
    iconPath: "/images/classify.png",
    pagePath: "/pages/classify/classify",
    selectedIconPath: "/images/classify_fill.png",
    text: "分类",
    type: 0
   },
   {
    type: 1,
    pagePath: "/pages/publish/publish",
   },
   {
    iconPath: "/images/collection.png",
    pagePath: "/pages/collection/collection",
    selectedIconPath: "/images/collection_fill.png",
    text: "收藏夹",
    type: 0,
   },
   {
    iconPath: "/images/me.png",
    pagePath: "/pages/me/me",
    selectedIconPath: "/images/me_fill.png",
    text: "我的",
    type: 0
   }
  ]
 },

 methods: {
  selectPage(e) {
   const { index, page, type } = e.currentTarget.dataset
   if (index !== this.data.select && type === 0) {
    wx.switchTab({
     url: page,
    })
   }
   if (type === 1) {
    wx.navigateTo({
     url: '../../pages/publish/publish',
    })
   }
   this.setData({
        select: index
      })
  }
 }
})

.tabbar {
 width: 100%;
 height: 80rpx;
 display: flex;
 background-color: #fff;
 position: fixed;
 bottom: 0;
 padding-bottom: env(safe-area-inset-bottom);
 padding-top: 10rpx;
 z-index: 9999;
}

.tabbar-item {
 flex: 1;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}

.tabbar-item .tabbar-image {
 width: 40rpx;
 height: 40rpx;
}

.tabbar-item .tabbar-text {
 font-size: 26rpx;
 margin-top: 10rpx;
}

.tabbar-item .publish {
 padding: 8px;
 background-color: #B2A4EC;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: auto;
}

.tabbar-select {
 color: #B2A4EC;
}