微信小程序基础

微信小程序

微信之父-张晓龙

使用view和使用text的区别

// 使用view默认会换行
<view>{{age}}</view>

// 使用text不会换行
<text>{{age}}</text>

设置页面

在app.json中写入,保存之后，会自动生成home、cart、mine、small、detail页面

  "pages": [
    "pages/home/home",
    "pages/cart/cart",
    "pages/small/small",
    "pages/mine/mine",
    "pages/detail/detail"
  ]

配置tabbar

 "tabBar": {
    "color": "#666",
    "selectedColor": "#ff0",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "icon/home.png",
        "selectedIconPath": "icon/home-selected.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "icon/cart.png",
        "selectedIconPath": "icon/cart-selected.png"
      },
      {
        "pagePath": "pages/small/small",
        "text": "商城",
        "iconPath": "icon/mall.png",
        "selectedIconPath": "icon/mall-selected.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "icon/mine.png",
        "selectedIconPath": "icon/mine-selected.png"
      }
    ]
  }

绑定事件

使用bindtop绑定事件，会触发事件冒泡，bindCatch可以阻止事件冒泡

<view catchtap='onBtap'>
  BBB
  <view catchtap='onCtap'>
  CCC
  </view>
</view>
// 这时点击CCC不会触发BBB事件

设置参数使用setData

<button bindtap='taggleViewShow'>显示/隐藏</button>

taggleViewShow() {
    this.setData({
      isShowView: !this.data.isShowView
    })
  }

条件渲染

<view
  wx:for="{{todos}}"
  wx:for-item="todo"
  wx:for-index="idx"
  wx:key="idx"
>
{{todo}}{{idx}}
</view>

<view
 wx:if="{{isShowView}}"
 wx:for="{{todos}}"
 wx:key="{{index}}"
 >
  {{item}}
</view>


data: {
    "age": 18,
    "name": "lia",
    "todos": ["吃", "喝", "玩"],
    "isShowView": false
  },

输入框绑定数据

<view>
  <input bindinput='onInput' value="{{inputValue}}"></input>
  <navigator url="/pages/detail/detail?id='123'">到详情页</navigator>
</view>

 onInput(e){
   this.setData({
     inputValue: e.detail.value
   })

路由

注意：navigator不能跳转到tabbar所包含的页面，这时需要使用wx.switchTab才能跳转到tabbar所包含的页面

<button bindtap='toHome'>到首页</button>

  toHome(){
    wx.switchTab({
      url: '/pages/home/home',
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  },

逆地址解析

data: {
    currentCity : '定位中'
  }, 
onLoad: function (options) {
    wx.showLoading({
      title: '加载中……',
      mask: true,
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
    wx.getLocation({
      success: (res) => {
        console.log(res)
        wx.request({
            // latitude 经度
            // longitude 维度
          url: `https://apis.map.qq.com/ws/geocoder/v1/?
location=${res.latitude},${res.longitude}&key=FSWBZ-CMZLP-OILDV-VMFJR-MIXH3-ACFHB&get_poi=1`,
          data: '',
          header: {},
          method: 'GET',
          dataType: 'json',
          responseType: 'text',
          success: (res) =>{
            this.setData({
              currentCity: res.data.result.address_component.district
            })
          },
          fail: function(res) {},
          complete: function(res) {
            wx.hideLoading()
          },
        })
      },
      fail: function(res) {},
      complete: function(res) {},
    })
  },

getStorgeSync

taro 京东小程序开发框架

mpvue

wepy

https://my.vultr.com

centos

server Hostname guigu

搭建ss服务器

在线端口检测

调用全局方法实现加入购物车

app.js

//app.js
App({
  onLaunch: function () {
    this.setBadge()
  },
  setBadge() {
    wx.setTabBarBadge({
      index: 2,
      text: this.cartList.reduce((result, item)=>{
        return result += item.quantity
      },0).toString()
    })
  },
  setCart(product) {
    if(this.cartList.some(item => item.id === product.id)){
      this.cartList = this.cartList.map(item => {
        if(item.id === product.id) {
          item.quantity += 1
        }
        return item
      })
    } else {
      this.cartList.push({
        ...product,
        quantity: 1
      })
    }
    wx.setStorageSync("cartList", this.cartList)
    this.setBadge()
  },
  cartList: wx.getStorageSync("cartList") || []
})

small.wxml

<view
    wx:for="{{products}}"
    wx:key="{{item.id}}"
  >
    <image src="{{item.image}}" class="product-image"/>
    <text>{{item.title}}</text>
    <!-- 使用data-product可以在点击事件的event里传入参数 在事件的dataSet里可以查看 -->
    <button catchtap="addToCate" data-product="{{item}}">加入购物车</button>
  </view>

small.js

// pages/small/small.js
import ajax from '../../utils/ajax.js'
// 使用全局的getApp()方法
const app = getApp()
console.log(app)
Page({
  /**
   * 页面的初始数据
   */
  data: {
    leftTab: [],
    currentCateId: 0
  },
  addToCate(e){
    // 调用app.js中的setCart方法，把获得的商品信息全部传递到该方法里
    app.setCart(e.currentTarget.dataset.product)
  },
  getTabs() {
    ajax.get('/api/tabs')
      .then(resp => {
        this.setData({
          leftTab: resp.data.data.list.slice(1),
          currentCateId: resp.data.data.list[1].id
        }, () => {
          this.getProduct()
        })
      })
  },
  getProduct() {
    ajax.get(`/api/tab/${this.data.currentCateId}?start=0`)
      .then(resp => {
        this.setData({
          products: resp.data.data.items.list
        })
      })
  },
  changeCate(e) {
    this.setData({
      currentCateId: e.currentTarget.dataset.id
    }, () => {
      this.getProduct()
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getTabs()
  }