微信小程序 -快速上手

第一個小程序

成功

導入一個已經在開發(fā)中項目

vscode 設置

設置高亮

拷貝到 settings.json

"files.associations": {
  "*.wxml": "html",
  "*.wxss": "css",
},

重啟 vscode 打開 wxml 文件 觀察 有沒有高亮

安裝小程序開發(fā)插件

小程序目錄結構

配置文件

全局配置 app.json

pages 字段

只能在微信開發(fā)者工具中 編輯 pages字段，按下保存 才生效?。?！

pages 快速創(chuàng)建頁面的時候 在里面創(chuàng)建即可

 "pages": ["pages/index/index","pages/index3/index3"],

作用：

1. 快速創(chuàng)建頁面的 只能在微信開發(fā)者工具編輯代碼才行
2. 指定頁面啟動順序

window

窗口

  "window": {
    "navigationBarBackgroundColor": "#ffda11",
    "navigationBarTitleText": "拼多多123",
    "navigationBarTextStyle": "yellow"
  },

tabBar

  "tabBar": {
    "selectedColor": "#e64a19",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁",
        "iconPath": "icons/home.png",
        "selectedIconPath": "icons/home-o.png"
      },
      {
        "pagePath": "pages/index3/index3",
        "text": "頁面3",
        "iconPath": "icons/cart.png",
        "selectedIconPath": "icons/cart-o.png"
      }
    ]
  },

頁面配置

頁面.json

只能修改 全局配置中 window字段的功能, 不需要再添加window字段

{
  "navigationBarTitleText": "頁面3",
  "navigationBarTextStyle": "white"
}

模板語法

條件渲染

列表渲染

事件綁定

事件傳參

data的獲取和設置

輸入框的補充

rpx

小程序中獨有 響應式px單位 規(guī)定 750rpx = 屏幕的寬度

計算屏幕適配公式

適用于 小程序 和 web

calc

width: calc(750rpx * 100 / 375);

vscode 插件來計算

1. 安裝插件

   

2. 設置設計稿的寬度 在vscode中 設置

     // 設置設計稿的寬度
     "px-to-rpx.baseWidth": 375
   

3. 重啟vscode

4. 直接使用

   

添加客服

管理員

1. 登錄自己小程序后臺，添加 微信號 - 客服

   

2. 添加客服 - 添加微信號

   

客服人員

客服人員需要 掃碼表示登錄

普通用戶

使用小程序 點擊 button 按鈕進行 聯(lián)系客服

開發(fā)者

<!-- 
  button
   open-type 指定按鈕功能
   contact 聯(lián)系客服功能
 -->
<button open-type="contact">聯(lián)系客服</button>

自定義組件

簡單使用

創(chuàng)建組件

注冊組件

index16.json
{
  "usingComponents": {
    "border-image": "../../components/border-image/border-image"
  }
}

使用組件

index16.wxml
<border-image></border-image>

父組件向子組件傳遞數(shù)據

父組件

index16.wxml
<border-image src="/images/1.png"></border-image>
<border-image src="/icons/home.png"></border-image>
<border-image src="/icons/home-o.png"></border-image>

子組件

border-image.js

Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    // 父組件傳遞過來的數(shù)據 src
    src: {
      // 數(shù)據類型
      type: String,
      // 默認值
      value: '',
    },
  },
});

border-image.wxml

<image mode="aspectFill" class="border-image" src="{{ src }}"></image>

子組件向父組件傳遞數(shù)據

子組件

綁定點擊事件 bindtap="handleTap"

border-image.wxml

<image bindtap="handleTap" mode="aspectFill" class="border-image" src="{{ src }}" ></image>

border-image.js 定義點擊事件的處理函數(shù)

必須把處理函數(shù)寫在 methods 對象中才行

Component({
  methods: {
    handleTap() {
    },
  },
});

點擊事件觸發(fā) 獲取到 被點擊圖片的src屬性 和 傳遞給父組件

handleTap() {
  this.triggerEvent('srcChange', this.properties.src);
},

父組件

index16.wxml 綁定 自定義事件 srcChange

<border-image bindsrcChange="handleSrcChange" src="/images/1.png" ></border-image>

index16.js 定義事件處理函數(shù) handleSrcChange

Page({
  handleSrcChange(e) {
  },
});

在事件處理函數(shù)中 接收數(shù)據 和 設置到 父頁面自己的數(shù)據中

// pages/index16/index16.js
Page({
  data: {
    src: '',
  },
  // 接收子組件傳遞過來的數(shù)據
  handleSrcChange(e) {
    console.log(e.detail);
    this.setData({
      src: e.detail,
    });
  },
});

補充

瀏覽器格式化json數(shù)據插件

文章來源地址http://www.zghlxwxcb.cn/news/detail-427165.html

到了這里，關于微信小程序 ---在Vscode上編輯，微信開發(fā)者工具上預覽，快速上手的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！