原生微信小程序開發(fā)教程

背景

最近公司有個項目體量比較小，需要使用原生小程序進行開發(fā)，因為之前都是使用uni-app開發(fā)的，所以抽出半天時間熟悉下微信小程序開發(fā)流程以及一些基礎(chǔ)語法。

一、注冊

首先是注冊的賬號，請先進入微信公眾平臺首頁，點擊 “立即注冊” 按鈕進行注冊，我們選擇 “小程序” 即可。注冊完成之后進入到開發(fā)管理拿到appid

image.png

二、微信開發(fā)者工具

下載微信web開發(fā)者工具，根據(jù)自己的操作系統(tǒng)下載對應(yīng)的安裝包進行安裝即可。

1.創(chuàng)建項目

選擇小程序，取消云開發(fā)選項，填寫剛才注冊的小程序平臺里的appid


image.png

三、目錄結(jié)構(gòu)

image.png

四、基本語法

1.文本渲染

<!--pages/demo/index.wxml-->
<view>{{text}}</view>
// pages/demo/index.js
Page({
  data: {
    text: 'demo測試頁面'
  },
})

2.條件渲染

<!--pages/demo/index.wxml-->
<view>
  <view wx:if="{{handleIf}}">條件渲染true</view>
  <view wx:elif="{{!handleIf}}">條件渲染false</view>
</view>
// pages/demo/index.js
Page({
  data: {
    handleIf: true
  },
})

3.循環(huán)列表渲染

<!--pages/demo/index.wxml-->
<view>
  <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
    {{idx}}: {{itemName.message}}
  </view>
</view>
// pages/demo/index.js
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  },
})

4.事件綁定（傳參）

<!--pages/demo/index.wxml-->
<view>
  <button bindtap="triggers" data-valueType="123">點擊我</button>
</view>
// pages/demo/index.js
Page({
  triggers(e){
    console.log(e.currentTarget.dataset.valuetype);
  }
})

5.路由跳轉(zhuǎn)（傳參）

<!--pages/demo/index.wxml-->
<button bind:tap="tapStringParameter">路由跳轉(zhuǎn)傳遞字符串參數(shù)</button>
<button bind:tap="tapObjectParameter">路由傳遞對象參數(shù)</button>
// pages/demo/index.js
Page({
  tapStringParameter(){
    console.log("tapStringParameter")
    wx.navigateTo({
      url: '/pages/test/index?name=Tim&sex=男'
    })
  },
  tapObjectParameter(){
    console.log("tapObjectParameter")
    let person = {
      name: '張三',
      sex: '男'
    }
    wx.navigateTo({
      url: '/pages/test/index?name=Tim&sex=男',
      success: function(res) {
        // 通過eventChannel向被打開頁面?zhèn)魉蛿?shù)據(jù)
        res.eventChannel.emit('acceptDataFromOpenerPage', person)
      }
    })
  }
})

6.本地存儲

<!--pages/demo/index.wxml-->
<view>
  <button bind:tap="handlesSetStorage">設(shè)置本地存儲數(shù)據(jù)</button>
</view>
// pages/demo/index.js
Page({
  handlesSetStorage() {
    // 設(shè)置緩存數(shù)據(jù)
    wx.setStorage({
      key: 'userInfo1',
      data: { name: 'Tom', age: 20 },
      success: function () {
        console.log('設(shè)置緩存數(shù)據(jù)成功');
      }
    });
    // 獲取緩存數(shù)據(jù)
    wx.getStorage({
      key: 'userInfo1',
      success: function (res) {
        console.log(res.data);
      }
    });
    // 設(shè)置本地存儲數(shù)據(jù)-同步
    wx.setStorageSync('userInfo2', { name: 'Tom', age: 20 });

    // 獲取本地存儲數(shù)據(jù)-同步
    var userInfo = wx.getStorageSync('userInfo2');
    console.log(userInfo);
  }
})

五、過濾器&&插槽

微信原生小程序中沒有像 Vue.js 那樣的內(nèi)置過濾器（Filter）功能，但可以通過以下兩種方式實現(xiàn)類似效果：

1.使用 WXS（WeiXin Script）

WXS 是小程序的一套腳本語言，可以在 WXML 模板中直接處理數(shù)據(jù)，類似過濾器的作用。

<!-- 定義 WXS 腳本 -->
<wxs module="filters">
  function formatPrice(price) {
    return '￥' + price.toFixed(2);
  }
  module.exports = {
    formatPrice: formatPrice
  }
</wxs>

<!-- 在模板中使用 -->
<view>{{ filters.formatPrice(100) }}</view>

2.或通過外部文件引入：

1.創(chuàng)建全局filter文件夾里面寫入對應(yīng)format.wxs處理文件


image.png

2.調(diào)用

<!--pages/demo/index.wxml-->
<wxs src="../../filters/format.wxs" module="filters" />
<view>
  <view>{{ filters.formatPrice(2000) }}</view>
</view>

六組件封裝調(diào)用（插槽使用）

1. 創(chuàng)建組件

在對應(yīng)目錄下創(chuàng)建 Components 文件夾，用來存放我們的自定義組件。


image.png

2.注冊

//app.json
  "usingComponents": {
    "head": "components/head/index"
  },

3.調(diào)用

<view>
  <head title-value="{{title}}"></head>
</view>

4.事件調(diào)用

  • 子組件定義事件傳遞
<view class="head" style="padding-top: {{paddingTopNum}}px;">
    <text bindtap="handleTap">{{titleValue}}</text>
</view>
// components/head/index.js
Component({
  methods:{
    handleTap() {
      // 定義要傳遞的數(shù)據(jù)
      console.log(999)
      let value = "ChildValue"
      // 觸發(fā)綁定事件, myevent為綁定的事件名
      this.triggerEvent('myevent', value)
    },
  },
})
  • 父組件接收調(diào)用
<view>
  <head title-value="{{title}}" bindmyevent="myevent"></head>
</view>
// pages/demo/index.js
Page({
  myevent(e) {
    // 這里通過 e 就可以接收子組件傳過來的內(nèi)容了
    console.log(e.detail)
  }
})

5.插槽使用

  • slot的使用
子組件wxml
<view class="head" style="padding-top: {{paddingTopNum}}px;">
  <slot></slot>
    <text bindtap="handleTap">{{titleValue}}</text>
</view>
父組件wxml
<view>
  <head title-value="{{title}}" bindmyevent="myevent">返回</head>
</view>
  • 組件 wxml 的 slot，多個插槽使用(具名插槽)
    在組件的 wxml 中可以包含 slot 節(jié)點，用于承載組件使用者提供的 wxml 結(jié)構(gòu)。
    默認(rèn)情況下，一個組件的 wxml 中只能有一個 slot 。需要使用多 slot 時，可以在組件 js 中聲明啟用。
子組件wxml
<view class="head" style="padding-top: {{paddingTopNum}}px;">
  <slot name="before"></slot>
  <text bindtap="handleTap">{{titleValue}}</text>
  <slot name="after"></slot>
</view>
子組件設(shè)置
Component({
  options: {
    multipleSlots: true // 在組件定義時的選項中啟用多slot支持
  }
})
父組件wxml
  <head title-value="{{title}}" bindmyevent="myevent">
    <view slot="before">
      <text>before</text>
    </view>
    <view slot="after">
      <text>after</text>
    </view>
  </head>

七、圖標(biāo)使用-iconfont引入

  • 去iconfont官網(wǎng)挑選自己的圖標(biāo)到項目

  • 項目設(shè)置勾選base64


    image.png

  • 在項目中創(chuàng)建static文件夾并創(chuàng)建iconfont.wxss把從iconfont官網(wǎng)下載的圖標(biāo)css粘貼進來


    image.png
  • 在app.wxss中進行引入
/**app.wxss**/
@import "./static/iconfont/iconfont.wxss";
  • 使用
 <text class="iconfont icon-zhuye" />

八、tabbar配置

//app.json 官方的tabbar配置只支持圖片如果想使用圖標(biāo)可以自定義tabbar
"tabBar": {
    "selectedColor": "#7626C9",
    "list": [
      {
        "current": 0,
        "pagePath": "pages/index/index",
        "text": "首頁",
        "iconPath": "/static/image/home.png",
        "selectedIconPath": "/static/image/homeActive.png"
      },
      {
        "current": 1,
        "pagePath": "pages/demo/index",
        "text": "我的",
        "iconPath": "/static/image/me.png",
        "selectedIconPath": "/static/image/meActive.png"
      }
    ]
  },

九、封裝小程序請求

  • 封裝 wx.request 請求傳遞需要的參數(shù)( url , data , method , success 成功回調(diào) ， fail 失敗回調(diào) ) , 封裝常用方法 POST , GET , DELETE , PUT .... 最后導(dǎo)出這些方法
  • 然后新建一個 api.js 文件，導(dǎo)入封裝好的方法，然后調(diào)取相應(yīng)的方法，傳遞數(shù)據(jù)。
    在utils目錄中新建request.js
const app = getApp(); //獲取小程序全局唯一app實例
const host = '******************'; //接口地址
 
//POST請求
function post(url, data, success,fail) {
  request(url, postData, "POST", doSuccess, doFail);
}
 
//GET請求
function get(url, data, success, fail) {
  request(url, postData, "GET", doSuccess, doFail);
}
 
function request(url, data, method, success, fail) {
  wx.showLoading({
    title: "正在加載中...",
  })
  wx.request({
    url: host + url, //請求地址
    method: method, //請求方法
    header: { //請求頭
      "Content-Type": "application/json;charset=UTF-8"
    },
    data: data, //請求參數(shù)    
    dataType: 'json', //返回數(shù)據(jù)格式
    responseType: 'text', //響應(yīng)的數(shù)據(jù)類型
    success: function(res) {
      wx.hideLoading();
      //成功執(zhí)行方法，參數(shù)值為res.data,直接將返回的數(shù)據(jù)傳入
      success(res.data);
    },
    fail: function() {
      //失敗執(zhí)行方法
      fail();
    },
  })
}
module.exports = {
  postRequest: post,
  getRequest: get,
}
  • 在組件中使用
const http = require('../../utils/request.js'); //相對路徑


const params = {//請求參數(shù)
  id:this.data.userId
}
http.postRequest("user/delUser", params, function(res) {
  console.log("修改成功！");
  
}, function(res) {
  console.log("修改失?。。?！")
})
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容