微信小程序入门开发实例-自我学习总结

自我学习总结

第一次使用 微信小程序 进行开发，开发内容是人员出入登记管理功能。主要实现了，两种角色登录实现不同功能，信息登记，照片上传与显示，拨打电话，下拉刷新；密码设置及密码登录，功能选择，列表循环展示，状态的控制改变，时间的记录与显示，等待。
由于技术有时效性，本文完成于2020年6月；但是思路没有时限，永远值得回看：）

一、准备篇

本部分主要是为开发小程序做准备。

1. 微信小程序的账号 的申请，小程序开发平台 的下载与安装，小程序开发平台 的使用，可参见官方文档。https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html
2. 开发模式的选择：小程序云开发 可参见云开发文档，简单讲，进本功能的实现不需要自己准备服务器和域名，还有一定的免费空间可以使用。小程序普通开发需要先：
   • 购买云服务器
   • 购买和备案域名
   • 网站的https。
3. 云服务器可以在阿里云、腾讯云、天翼云，等待购买；我自己买的阿里云的ECS，centos的系统，装上了宝塔面板对服务器进行运维，我觉得还蛮方便。（了解宝塔：https://www.bt.cn/）
4. 域名可以在阿里云或其他地方购买，备案现在都是在线备案，方便很多；
5. 网站的https 微信需要网站升级至https，网站搭建好后可花钱购买https的相关部署服务；当然，这里介绍一下免费的方法。阿里云购买的ECS，阿里云就提供免费SSL证书，只是隐藏的比较深，多点点就找到了。（宝塔面板里也提供了免费的SSL证书，可自行查看）
   
6. SSL证书 的申请与使用宝塔面板进行的部署：具体步骤可参见https://www.cnblogs.com/YFYQ/p/12842772.html
   
   
   部署完成后，一定要去SSL证书在线检测网站（如https://csr.chinassl.net/ssl-checker.html）检测一下是否完整正常，不然后续微信小程序调取的时候有异常。这个坑我进过https://blog.csdn.net/zxm8513/article/details/105078975/。
7. 在 微信小程序 里添加已经服务器的域名，以便可以使小程序与服务器进行通讯。
8. 至此，准备完成。

二、小程序开发篇

不同主体、不同开发者、不同功能的开发，都会涉及到不同组件、框架、API、扩展能力等等的选择和使用。这里我简单记录了一下我用到的几种情况。

2.1官方的开发文档还是最好的伙伴和老师
https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html

B站上的入门教程，我推荐两个实战教程，简单易懂，实例上手

1.清华大学：学做小程序——实战篇：树洞小程序
https://www.bilibili.com/video/BV1M7411f7e4?p=29
2.零基础玩转微信小程序【黑马程序员】
https://www.bilibili.com/video/BV1nE41117BQ?t=3&p=8

2.2wxml部分功能代码举例
如果flag为A则显示按钮“A”，flag为B显示按钮“B”，其他情况显示按钮“C”
bindtap为button绑定了功能，该功能在js页实现

// wx:if和wx:else的使用，做判断
<view wx:if="{{flag == 'A'}}">
	<button class="a" bindtap="a">A</button>
</view>
<view wx:elif="{{flag == 'B'}}">
	<button class="b" bindtap="b">B</button>
</view>       
<view wx:else>
	<button class="c" bindtap="c">C</button>
</view> 

页面通过<scroll-view>标签实现页面可滑动的效果

// <scroll-view scroll-y="true">的使用，可滚动视图区域，y竖向滚动
<scroll-view scroll-y="true">
xxx//填相应内容即可
</scroll-view>

<image>标签的使用，mode设置图片显示的模式

// <image>标签的使用，mode设置图片显示的模式
<image src="/images/apple.jpg" mode="aspectFill"></image>

mode 的合法值（仅举3种例子，详见微信文档）：

值	说明
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

<input>标签的使用，手机输入框调用文本/数字/密码

// <input>标签的使用，手机输入框调用文本/数字/密码
<input id="name" placeholder='请输入姓名' placeholder-class="plas" type="text" bindinput="nameInput"/>
<input id="phone" placeholder='请输入手机号' placeholder-class="plas" type="number" bindinput="phoneInput"/>
<input id="password" placeholder='请输入密码' placeholder-class="plas" type="password" password="true" bindinput="passwordInput"/>
</view>

<navigator>标签的使用，页面链接

// <navigator>标签的使用，页面链接，跳转到小程序另一个url
<navigator class="readme" url="/pages/about/about">
  --请阅读须知--      
</navigator>

<wx:for>标签的使用，页面循环展示

// 设置页面竖向滑动
<scroll-view class="scbg" scroll-y="true">
//{{visitor_list.length}}获取列表长度
<view class='allpeople'>来访人员共{{visitor_list.length}}位</view>
<block>
//{{visitor_list}}列表循环，wx:key="phone"关键词为"phone"并向下个页面传参。
  <navigator wx:for="{{visitor_list}}" wx:for-item="itemName" wx:for-index="id" wx:key="phone" url="/pages/visitordetail/visitordetail?phone={{itemName.phone}}">
   <view class='box'>
    	<view class='name'>
			<text class='showname'>{{itemName.name}}</text>
    	</view>
    	<view class='phone'>
        	<text class='showphone'>{{itemName.phone}}</text>
    	</view>
	</view>
  </navigator>
</block>
</scroll-view>

2.3页面传参的三种方法
以下图片部分搬自
https://blog.csdn.net/weixin_42268456/article/details/81183445
正向传值：上一页面 --> 下一页面
1.url传值

2.本地储存

3.全局的app对象

反向传值：下一页面 --> 上一页面
1.本地储存

2.全局的app对象

2.4微信小程序内置组件
调用打电话

//js页面，读取缓存phone数据为拨打的号码
call(){
    wx.makePhoneCall({
      phoneNumber: this.data.phone, 
      success: function () {
        console.log("拨打电话成功！")
      },
      fail: function () {
        console.log("拨打电话失败！")
      }
    })
},

选择图片和上传图片

// 选择图片
wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success (res) {
    // tempFilePath可以作为img标签的src属性显示图片
    const tempFilePaths = res.tempFilePaths
  }
})
//上传图片
wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        'user': 'test'
      },
      success (res){
        const data = res.data
        //do something
      }
    })

调用api通信

// <navigator>标签的使用，页面链接，跳转到小程序另一个url
wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

对话框

wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success (res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

提示框

wx.showLoading({
  title: '加载中',
})
setTimeout(function () {
  wx.hideLoading()
}, 2000)

三、后台开发篇

后台使用thinkphp+mysql进行开发，主要是简单。主要对微信传来的数据进行增删改查，这几种操作在thinkphp中都进行了很好的功能集成。将功能做成API接口，在微信小程序中进行调用即可。

四、POSTMAN测试接口

在后台开发好相应api后使用POSTMAN对接口进行相应的测试，先验证下功能是否正常，获得的数据是否是需要的。

五、小程序测试、部署、审核、上线。

测试，在小程序开发工具上进行，测试功能的完整性，逻辑的完整性。
部署，即上传开发工具的代码到腾讯，填写必要的信息。
审核，在微信公众平台网页版里进行提交审核，1-7个工作日审核完。
上线，审核通过后即可点击上线。

至此，一个小程序开发完成。