微信小程序初体验，入门练手项目--通讯录，后台是阿里云服务器(一)

2023-11-19 09:13:10

内容：

一、前言

二、相关概念

三、开始工作

四、启动项目起来

五、项目结构

六、设计理念

七、路由

八、部署线上后端服务

同步交流学习社区： https://www.mwcxs.top/page/440

源码地址：https://github.com/saucxs/wx_phoneBook

一、前言（坑爹的玩意）

微信小程序自从2017年，被各种看好，不过一段时间过去了还是反响平平，下半年随着各项功能的开放，很多企业陆续接入了小程序，我觉得就算是坑，咱们也得踩踩。不然怎么从微信这个大流量体系中推广引流。

小程序内部可以理解成一个mvvm的框架，分为逻辑层和视图层，逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

最近微信小程序异常火爆，很多人在学习，下面带着大家搭建下微信小程序的调试环境（client+server），并调试入门练手项目--通讯录（phoneBook）（JavaScript和node.js基础即可,微信推荐使用的语言，去菜鸟教程简单学习下 JavaScript，node.js，mysql，nginx即可），方便大家学习。

二、相关概念

官方解释：微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。可以理解成一套嵌套在微信里面的app，和原生app不同的是不需要下载，属于小而轻的应用。

三、开始工作

1、本地koa后台服务部署

可以参考快速新建简单的koa2后端服务这篇文章，教会你快递建立简单的koa后端服务。

2、准备注册等工作

（1）注册账号

（2）下载开发者工具, 下载1.02.x这个版本的，最新版的有bug，编译的时候调试器Wxml窗口会出现空的page标签，里面没有内容。

（3）注册好后登录下微信公众平台|小程序，在设置里找到开发设置，把appID保存下来，一会开发的时候需要用到

四、启动项目起来

1、此时，工具有了，ID有了，接下来开始我们的撸码之旅。

打开开发者工具，扫码登录后选择小程序项目，点击右下角的加号，创建新项目，选择项目目录，填写appID，项目名称，写好后点击确定。

2、确定以后，默认打开后，发现给我们创建了一些代码。

3、设置不校验合法域名

这个设置是本地开发换环境下，进行开发调试的，必须勾上。

4、运行起来了

五、项目结构

我们主要看app.js、app.json、app.wxss三个文件和pages文件夹里面的wxml

1、app.js做为小程序的入口，里面有个App实例，每个小程序只会有一个App实例，小程序启动以后触发onLaunch函数执行，获取用户信息

2、app.json是小程序的所有全局配置，pages字段放置所有页面的路径，window字段定义所有页面的顶部背景颜色，文字颜色详细配置请戳这里??

3、app.wxss文件就是页面公用的样式，仅支持部分css选择器

4、wxml就是我们的HTML文件，常用标签为 view 、text 等，没有所谓的div、span、p一类的标签了，我们习惯称它们为组件

六、设计理念

1、小程序可以理解成一个mvvm的框架

分为逻辑层和视图层，逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

// pages/login/login.js
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    phone: ‘‘,
    password: ‘‘,
    isError: false,
    errorText: ‘‘
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 输入手机号
   */
  bindPhoneInput: function(item){
    this.setData({
      phone: item.detail.value
    })
  },
  
    /**
   * 输入密码
   */
  bindPasswordInput: function (item) {
    this.setData({
      password: item.detail.value
    })
  },


  /**
 * 点击登录按钮
 */
  login: function (item) {
    if(this.data.phone === ‘‘ || this.data.password === ‘‘){
      this.setData({
        isError: true,
        errorText: "手机号码或密码不能为空"
      })
      return;
    }
    let that = this;
    wx.request({
      url: `${app.globalData.apiUrl}/login`,
      data: {
        phone: this.data.phone,
        password: this.data.password
      },
      method: "POST",
      success: function(res){
        if(res.data.success){
          wx.setStorageSync("USERID", res.data.userID);
          wx.switchTab({
            url: ‘/pages/department/department‘,
          });
        }else{
          that.setData({
            isError: true,
            errorText: "请输入正确的手机号码或密码"
          })
        }
      },
      fail: function(item){
        console.log(item)
      },
      complete: function(item){
        console.log(item)
      }
    })
  },

使用Page函数来注册一个页面，接收一个Object参数。

这里我们使用了onLoad来监听页面的加载，

定义了一个输入手机号bindPhoneInput函数，并使用setData函数将text的值进行更改，

定义一个输入密码bindPasswordInput函数，并使用setData函数将text的值进行更改，

定义一个登陆按钮login函数，通过wx.request方法请求后端服务接口，通过wx.setStorageSync方法将请求的结果加入到storage中，通过wx.switchTab方法跳转到相应的路由。

<!--pages/login/login.wxml-->
<view class="container">
  <view class="login-container">
    <text class="app-title">系统</text>
    <form class="login-form">
      <view class="section">
        <input name="phone" type="number" bindinput="bindPhoneInput" maxlength="11" placeholder="手机号码" />
      </view>
      <view class="section">
        <input name="password" bindinput=‘bindPasswordInput‘ type="password" password="true" placeholder="密码" />
      </view>
      <text class="{{ isError ? ‘error‘ : ‘‘}}">{{errorText}}</text>
    </form>
    <view class="section">
      <button bindtap="login">立即登录</button>
    </view>
  </view>
</view>

更改data数据的时候必须调用setData函数进行更改，我们在button组件上添加了点击事件，调用了login函数。

相应的事件可以参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

2、传递参数

有时候我们需要触发事件的时候，传递一些参数，那小程序怎么传递呢？很不幸，小程序不能类似js里面直接传递，往往我们需要将传递的数据绑定到事件元素上。

// index.wxml
<button data-test="哈哈"  bindtap="change">点击我</button>
使用e.currentTarget.dataset来获取值
// index.js
change(e){
  e.currentTarget.dataset.test  // 哈哈
}

七、路由

小程序里面所有的页面路由由框架进行管理

我们可以使用getCurrnetPages函数获取当前页面栈的实例，返回一个数组, 最后一个元素为当前页面

小程序定义了五个用于导航跳转的API，这里列举两个常用的

1、wx.navigateTo 保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面

wx.navigateTo({url:`/pages/text/index?text=${saucxs}`})

2、wx.redirectTo 关闭当前页面，跳转到应用内的某个页面

wx.navigateTo({url:`/pages/text/index?text=${saucxs }`})

通过上面的API跳转带的参数，在页面上我们需要怎么获取呢？

// text.js
Page({
  data:{
     ... // 页面数据
  },
  onLoad(options){
    console.log(options.text)  // saucxs 获取上个页面带过来的值
  }
})

（一）数据过滤过滤器

如果你使用过vue、angular框架，对|管道符肯定不陌生，它用来对我们的数据进行转换，那小程序里面有没有过滤器呢，不过这个是真没有。

但是目前有两种方法，可以实现过滤。

1、获取数据的时候，直接改了，干脆利落、好不优雅。

2、使用最后我们要介绍的wxs

（二）WXS

WXS是小程序的一套脚本语言，首先和js是不同的语言，其次运行环境和js也是隔离开的，wxs不能调用js文件中的函数，也不能调用小程序的API，它主要用来增强wxml。

wxs不能使用es6语法，接下来我们来实现一个使用wxs实现一个简单的过滤器。

1、首先我们创建filter.wxs文件并写入以下内容

// filter.wxs
var Filter = {
  getSatusStr: function(num){
    var str = ‘‘;
    switch (num) {
      case 0:
        string = ‘待支付‘
        break;
      case 1:
        string = ‘已支付‘
        break;
      default:
        string = ‘待发货‘
        break;
    }
    return str
  }
}
module.exports = {
  status: Filter.getSatusStr
}

同级下index.wxml使用

<wxs module="filter" src="./filter.wxs"></wxs> 
<view wx:for="{{list}}">
  <view>{{filter.status(item.status)}}</view>  
</view>

总结：

1、每个wxs标签都有一个module 属性

2、wxs可以写在wxml里面的wxs标签里和.wxs文件里

3、wxs文件中引入其他wxs文件时候，可以使用require函数，接受相对路径

4、在wxml标签里使用外部wxs文件的时候，src属性是相对路径。

八、部署线上后端服务

微信小程序搭建环境必需的两点：云服务器，域名，下面给搭建演示如果在一台阿里云服务器上搭建微信小程序服务端环境。

（一）准备好将http转成https

可以参考这篇阿里云免费购买SSL证书，nginx无缝升级https：https://www.mwcxs.top/page/434.html

参考主要是申请和解析域名，以及将nginx的http跳转到https。

（二）线上部署koa后台服务

1、修改mysql配置

const pool = mysql.createPool({
  host: ‘xx.xx.xx.xx‘,
  port: ‘3306‘,
  user: ‘root‘,
  password: ‘xxxxxxxxx‘,
  database: ‘wx_contactsadmin‘,
  connectionLimit: 100
})

host使用你的服务器外网IP，user数据库用户名，密码，以及数据库名称。

2、修改请求后端的url

在app.js

globalData: {
    userInfo: null,
    // apiUrl: ‘http://localhost:8000/contact‘
    apiUrl: ‘https://phonebook.mwcxs.top/contact‘
  }

3、使用pm2管理koa的服务

4、本地修改设置不校验合法域名

去掉不校验合法域名的勾选

微信小程序初体验，入门练手项目--通讯录，后台是阿里云服务器(一)

码农公寓

相关文章