微信小程序:Taro 框架開發體驗

收藏待读

微信小程序:Taro 框架開發體驗

Taro 可以讓我們用 React.js 的風格來開發微信小程序、支付寶小程序等等。它是京東推出的一套多端應用開發框架。寧皓網最近出了  Taro 框架相關課程 ,會員們可以在線看了 :)

在開發微信小程序的時候,你可能需要使用 TypeScript,要用 NPM 上的包,打算用 Async Await 做異步編程,本身已經熟悉其它前端框架的開發流程,這些都是選擇框架來開發微信小程序的原因。

比如 wepy,mpvue,也可以使用 Taro 。選擇框架主要主是為了提高開發體驗,有些框架偏向 Vue.js 風格,Taro 是 React.js 風格。

Taro 不但允許我們使用熟悉的 React.js 方式來開發微信小程序,同時還可以生成適用於其它平台的應用,比如支付寶小程序、H5 應用、React Native 移動端應用等等。

關鍵概念

使用 Taro 之前,如果能熟悉 React.js 當然最好,不懂也沒關係。有些關鍵概念可以先了解一下。比如在應用裏面有組件(Component),在 Taro 裏面,一個頁面可以是一個組件,組件可以相互之間組合使用,比如一個內容列表組件裏面可能會用到內容項目組件。組件的好處就是靈活,可重複使用。

組件可以有一些屬性(Prop),比如一個內容項目組件,可以顯示內容標題,那這個標題就可以成為組件的一個屬性, 這樣在使用組件的時候就可以傳遞一個標題屬性的值給內容項目組件。

組件裡頭用的數據叫狀態(State),如果是大型應用,管理狀態有專門的方法,比如使用 Redux 的方式。簡單的應用可以直接讓組件管理狀態,比如一個內容列表組件,它需要的列表數據可以在組件的生命周期方法裏面請求得到。

創建項目

直接使用 npx 執行 Taro 命令行工具去創建項目,或者在本地全局範圍安裝一下 Taro 的命令行工具,就可以使用它創建 Taro 項目了。

npm install @tarojs/cli --global

然後執行:

taro init ninghao-taro

上面命令會創建一個項目,執行過程會問一些問題,比如是否要使用 TypeScript(推薦使用),使用的 CSS 預處理器是什麼,要不要使用 Redux 等等。注意如果 CSS 預處理器選擇的是 Sass ,在創建項目的時候需要等挺長時間,不要着急。

編輯器

開發時可以使用自己習慣的代碼編輯器,我現在用的是 VS Code 編輯器。因為 Taro 組件的視圖部分會使用 JSX 風格,我想用 Emmet 的縮寫功能,需要特別配置一下。

打開編輯器的配置、擴展,找到 Emmet 插件。在 settings.json 中編輯一下  Include Languages 這個配置選項,主要就是在  settings.json 裏面添加下面這塊配置:

"emmet.includeLanguages": {
   "javascript": "javascriptreact",
},

然後在 Emmet 插件的配置裏面,勾選一下 Trigger Expansion On Tab 選項。 這樣輸入了一些縮寫以後,按一下 Tab 按鍵可以展開縮寫。

開發微信小程序

打算開發調試微信小程序,要在項目下面執行一下:

npm run dev:weapp

命令會把應用編譯成微信小程序放在指定的目錄下面,同時會監聽相關文件的變化 ,有變化會重新編譯需要的東西。

微信小程序:Taro 框架開發體驗

這時可以打開微信開發者工具,新建一個小程序項目,目錄可以選擇 Taro 項目的根目錄。

微信小程序:Taro 框架開發體驗

開發流程

Taro 應用的頁面要放在 src/pages 下面,默認有一個頁面是在  index 目錄的下面,頁面是  index.js ,這樣這個頁面的地址就是  /pages/index/index

比如我們要創建一個內容列表頁面,在 src/pages 下面新建一個  posts 目錄,裏面添加一個  index.js  文件。有了頁面要去註冊一下,在  src/app.js 裏面,找到  config 里的  pages ,添加一個新的頁面: /pages/posts/index ,把頁面放在最上面,它就會是應用的首頁。

頁面文件頭部先導入一些東西:

import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'

然後定義一個類,並且把這個類作為文件默認導出的東西。

class PostIndex extends Component {
  render() {
    return (
      Posts
    )
  }
}

export default PostIndex

類裏面的 render 方法返回的東西就是視圖。在這個頁面里再添加點東西:

import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'

class PostIndex extends Component {
state = {
posts: []
}

handleClick(id, event) {
Taro.navigateTo({
url: `/pages/posts/show?id=${id}`
})
}

async componentWillMount() {
const response = await Taro.request({
url: `${API_HOST}/posts`
})

this.setState({
posts: response.data
})
}

config = {
navigationBarTitleText: 'Posts'
}

render() {
return (
<View className="container">
{posts.map((post) =>
<View className="card" key={post.id} onClick={this.handleClick.bind(this, post.id)}>
<Image mode="aspectFill" className="card-img-top" src={post.imageUrl}/>
<View className="card-body">
<View className="card-title">{post.title}</View>
<View className="card-subtitle">{post.author}</View>
</View>
</View>
)}
</View>
)
}
}

export default PostIndex

上面這個類里的 componentWillMount 是個生命周期方法,意思是組件將要掛載顯示,這時候我們做了一些事情。使用  Taro.request 請求了外部服務接口獲取到了一組列表數據,然後用  this.setState 把它交給了組件的  posts 這個狀態,這樣在視圖裏面就可以使用這組數據了。

注意請求接口的時候,接口地址里用了一個 API_HOST ,這個東西是在  config/dev.js  里的  defineConstants 裏面定義的。 dev.js 這裡的配置會用在開發環境上, prod.js 里的東西會用在生產環境上。

我們用了 posts.map 迭代了一下,這部分內容其實可以定義成一個單獨的組件(內容項目組件)。

在內容項目的包裝上綁定了 Click 事件,綁定事件就是用 on 後面加上事件的名字,名字首字母大寫。事件處理用的是 handleClick ,所以要在類裏面定義一下這個方法。方法有  id  參數,還有一個表示事件的  event 參數。

在事件處理裏面,用了 Taro.navigateTo ,打開了一個新的頁面,打開的時候傳遞了一個  id 參數,在即將打開的頁面上可以得到這個  id 參數的值,這樣在打開頁面的時候我們就可以先去請求需要的數據了。

微信小程序:Taro 框架開發體驗

再去創建一個內容詳情頁面,在頁面的生命周期方法里先得到頁面上需要的數據, 獲取頁面需要的數據可以根據上一個頁面傳遞過來的 id 參數,這個參數的值是: this.$router.params.id 

微信小程序:Taro 框架開發體驗

Async Await

開發時要使用 Async Await 得先去給項目安裝一個叫 @tarojs/async-await 的包,然後在應用的入口文件(app.js )裏面導入這個包, 這樣在應用中就可以使用 Async Await 了。

微信小程序:Taro 框架開發體驗

原文 :

相關閱讀

免责声明:本文内容来源于mp.weixin.qq.com,已注明原文出处和链接,文章观点不代表立场,如若侵犯到您的权益,或涉不实谣言,敬请向我们提出检举。