文章目錄

• • • 前言：最近因公司業(yè)務(wù)調(diào)整，需要準(zhǔn)備開發(fā)微信小程序，之前都是用ionic做的混合開發(fā)，現(xiàn)在轉(zhuǎn)戰(zhàn)小程序，看了下小程序也支持typescript，難度是有的，但是不是很大，應(yīng)該有很多共同之處。謹(jǐn)以此篇博客 記錄ionic轉(zhuǎn)戰(zhàn)微信小程序?qū)崙?zhàn)的第一戰(zhàn)。
    • 1.環(huán)境搭建
    • • • 下載微信開發(fā)工具，并更新到最新版
    • 2.打開微信開發(fā)工具并配置
    • • • 如果沒有AppID先用測試號的即可，后期申請了之后可以在配置文件中更換。開發(fā)模式選擇小程序，如果是想開發(fā)插件供小程序使用，需要選擇插件，語言我選擇的是TypeScript，不熟悉這個的可以選擇JavaScript。
    • 3.簡單demo使用
    • • • 進(jìn)入小程序之后是官方提供的一個簡單Hello World Demo，由于我使用的是TypeScript開發(fā)，所以先把npm給配置上。
    • 4.NPM配置
    • • • 配置npm之前要先安裝NodeJs，直接去官網(wǎng)下載安裝即可，安裝完后cmd查看下 node -v，有版本號提示即表示安裝成功。
    • 5.初始化NPM
    • • • • 在小程序開發(fā)工具終端中進(jìn)入小程序的根目錄而不是項目的根目錄中，執(zhí)行npm init默認(rèn)一路回車即可生成package.json文件
    • 6.添加插件
    • • • 這里以我要添加的插件Crypto為例，執(zhí)行
    • 7.NPM構(gòu)建
    • • • 在微信開發(fā)工具左上角選擇工具-》構(gòu)建npm，成功后出現(xiàn)如下提示
    • 8.小程序頁面新建
    • • • 在小程序根目錄下找到app.json，在pages中新增頁面
    • 9.項目編譯運行

前言：最近因公司業(yè)務(wù)調(diào)整，需要準(zhǔn)備開發(fā)微信小程序，之前都是用ionic做的混合開發(fā)，現(xiàn)在轉(zhuǎn)戰(zhàn)小程序，看了下小程序也支持typescript，難度是有的，但是不是很大，應(yīng)該有很多共同之處。謹(jǐn)以此篇博客 記錄ionic轉(zhuǎn)戰(zhàn)微信小程序?qū)崙?zhàn)的第一戰(zhàn)。

1.環(huán)境搭建

下載微信開發(fā)工具，并更新到最新版

2.打開微信開發(fā)工具并配置

如果沒有AppID先用測試號的即可，后期申請了之后可以在配置文件中更換。開發(fā)模式選擇小程序，如果是想開發(fā)插件供小程序使用，需要選擇插件，語言我選擇的是TypeScript，不熟悉這個的可以選擇JavaScript。

3.簡單demo使用

進(jìn)入小程序之后是官方提供的一個簡單Hello World Demo，由于我使用的是TypeScript開發(fā)，所以先把npm給配置上。

4.NPM配置

配置npm之前要先安裝NodeJs，直接去官網(wǎng)下載安裝即可，安裝完后cmd查看下 node -v，有版本號提示即表示安裝成功。

在微信開發(fā)工具右側(cè)選擇詳情，勾選 使用npm模塊

5.初始化NPM

在小程序開發(fā)工具終端中進(jìn)入小程序的根目錄而不是項目的根目錄中，執(zhí)行npm init默認(rèn)一路回車即可生成package.json文件

6.添加插件

這里以我要添加的插件Crypto為例，執(zhí)行

npm install crypto-js
執(zhí)行成功后在小程序跟目錄下生成如下文件

7.NPM構(gòu)建

在微信開發(fā)工具左上角選擇工具-》構(gòu)建npm，成功后出現(xiàn)如下提示

并在小程序跟目錄生成miniprogram_npm目錄

8.小程序頁面新建

在小程序根目錄下找到app.json，在pages中新增頁面

“pages/main/main”,并放到第一行保存后自動生成四個文件，與index文件中相比少了ts文件，將main.js復(fù)制并改為main.ts保存，將代碼寫到main.ts中編譯后自動生成main.js文件，實際上小程序是訪問的main.js，并不會訪問ts文件，在xxx.wxml中做頁面布局，在xxx.wxss中定義布局的樣式。

仿照同智簽APP已簽署任務(wù)做了一個列表布局

頁面布局如下：

<view class="container">
  <view wx:for="{{array}}" class="card">
    <view>
      <label>{{item.description}}</label>
    </view>
    <view>
      <label>發(fā)起人：</label> <label>{{item.createUser}}</label> <label>患者姓名：</label><label>{{item.patientName}}</label>
    </view>
    <view>
      <label>發(fā)起時間：</label><label>{{item.createTime}}</label>
    </view>
    <view>
      <label>處理時間：</label><label>{{item.signTime}}</label>
    </view>
    <view>
      <label>簽署狀態(tài)：</label> <label>{{item.status==1?"已簽署":"未簽署"}}</label>
    </view>
  </view>
  <button type="primary" plain="true" bindtap="getDataFromWeb">按鈕</button>
</view>

頁面默認(rèn)顯示一個card樣式，計劃點擊按鈕執(zhí)行網(wǎng)絡(luò)請求獲取接口數(shù)據(jù)并加載到頁面中
樣式定義如下：

/* pages/main/main.wxss */
.container{
  background: gray;
}
.card{
  width: 90%;
  height: 250rpx;
  margin-bottom: 30rpx;
  background: white;
  border-radius: 10rpx;
  position: relative;
  padding: 10rpx;
}

main.ts中集成點擊事件、網(wǎng)絡(luò)請求、接口參數(shù)生成等功能，具體代碼如下：

// pages/main/main.js
var http = require('../../utils/httputils.js');
var utilTools = require('../../utils/UtilTools');
Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    array: [
      { description: "任務(wù)名稱一", createUser: "張三1", patientName: "李四1", createTime: "2020-10-10", signTime: "2020-10-10", status: "2020-10-10", reason: "2020-10-10" },
    ]
  },
  getDataFromWeb() {
    debugger;
    let obj = utilTools.getParams();
    obj.method = "030015";
    obj.message = JSON.stringify({ "userId": 94, "limit": 10, "page": 1 });
    http.postRequest("http://192.168.2.140:8098/central/app/", obj, (data: any) => {
      console.log("res:" + data);
      if (!!data && data["success"] == "true" && data["data"] != "") {
        var arr = JSON.parse(data["data"]);
        if (arr && arr.list && arr.list.length > 0) {
          this.setData({ array: arr.list })
        }
      }
    },
      (err: any) => {
        console.log("err:" + err);
      })
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  alt="在這里插入圖片描述" />