文章目录

• • • 前言：最近因公司业务调整，需要准备开发微信小程序，之前都是用ionic做的混合开发，现在转战小程序，看了下小程序也支持typescript，难度是有的，但是不是很大，应该有很多共同之处。谨以此篇博客 记录ionic转战微信小程序实战的第一战。
    • 1.环境搭建
    • • • 下载微信开发工具，并更新到最新版
    • 2.打开微信开发工具并配置
    • • • 如果没有AppID先用测试号的即可，后期申请了之后可以在配置文件中更换。开发模式选择小程序，如果是想开发插件供小程序使用，需要选择插件，语言我选择的是TypeScript，不熟悉这个的可以选择JavaScript。
    • 3.简单demo使用
    • • • 进入小程序之后是官方提供的一个简单Hello World Demo，由于我使用的是TypeScript开发，所以先把npm给配置上。
    • 4.NPM配置
    • • • 配置npm之前要先安装NodeJs，直接去官网下载安装即可，安装完后cmd查看下 node -v，有版本号提示即表示安装成功。
    • 5.初始化NPM
    • • • • 在小程序开发工具终端中进入小程序的根目录而不是项目的根目录中，执行npm init默认一路回车即可生成package.json文件
    • 6.添加插件
    • • • 这里以我要添加的插件Crypto为例，执行
    • 7.NPM构建
    • • • 在微信开发工具左上角选择工具-》构建npm，成功后出现如下提示
    • 8.小程序页面新建
    • • • 在小程序根目录下找到app.json，在pages中新增页面
    • 9.项目编译运行

前言：最近因公司业务调整，需要准备开发微信小程序，之前都是用ionic做的混合开发，现在转战小程序，看了下小程序也支持typescript，难度是有的，但是不是很大，应该有很多共同之处。谨以此篇博客 记录ionic转战微信小程序实战的第一战。

1.环境搭建

下载微信开发工具，并更新到最新版

2.打开微信开发工具并配置

如果没有AppID先用测试号的即可，后期申请了之后可以在配置文件中更换。开发模式选择小程序，如果是想开发插件供小程序使用，需要选择插件，语言我选择的是TypeScript，不熟悉这个的可以选择JavaScript。

3.简单demo使用

进入小程序之后是官方提供的一个简单Hello World Demo，由于我使用的是TypeScript开发，所以先把npm给配置上。

4.NPM配置

配置npm之前要先安装NodeJs，直接去官网下载安装即可，安装完后cmd查看下 node -v，有版本号提示即表示安装成功。

在微信开发工具右侧选择详情，勾选 使用npm模块

5.初始化NPM

在小程序开发工具终端中进入小程序的根目录而不是项目的根目录中，执行npm init默认一路回车即可生成package.json文件

6.添加插件

这里以我要添加的插件Crypto为例，执行

npm install crypto-js
执行成功后在小程序跟目录下生成如下文件

7.NPM构建

在微信开发工具左上角选择工具-》构建npm，成功后出现如下提示

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

8.小程序页面新建

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

“pages/main/main”,并放到第一行保存后自动生成四个文件，与index文件中相比少了ts文件，将main.js复制并改为main.ts保存，将代码写到main.ts中编译后自动生成main.js文件，实际上小程序是访问的main.js，并不会访问ts文件，在xxx.wxml中做页面布局，在xxx.wxss中定义布局的样式。

仿照同智签APP已签署任务做了一个列表布局

页面布局如下：

<view class="container">
  <view wx:for="{{array}}" class="card">
    <view>
      <label>{{item.description}}</label>
    </view>
    <view>
      <label>发起人：</label> <label>{{item.createUser}}</label> <label>患者姓名：</label><label>{{item.patientName}}</label>
    </view>
    <view>
      <label>发起时间：</label><label>{{item.createTime}}</label>
    </view>
    <view>
      <label>处理时间：</label><label>{{item.signTime}}</label>
    </view>
    <view>
      <label>签署状态：</label> <label>{{item.status==1?"已签署":"未签署"}}</label>
    </view>
  </view>
  <button type="primary" plain="true" bindtap="getDataFromWeb">按钮</button>
</view>

页面默认显示一个card样式，计划点击按钮执行网络请求获取接口数据并加载到页面中
样式定义如下：

/* 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中集成点击事件、网络请求、接口参数生成等功能，具体代码如下：

// pages/main/main.js
var http = require('../../utils/httputils.js');
var utilTools = require('../../utils/UtilTools');
Page({
  /**
   * 页面的初始数据
   */
  data: {
    array: [
      { description: "任务名称一", 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);
      })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  alt="在这里插入图片描述" />