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

微信小程序入门实践

自我学习总结

第一次使用 微信小程序 进行开发,开发内容是人员出入登记管理功能。主要实现了,两种角色登录实现不同功能,信息登记,照片上传与显示,拨打电话,下拉刷新;密码设置及密码登录,功能选择,列表循环展示,状态的控制改变,时间的记录与显示,等待。
由于技术有时效性,本文完成于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
    微信小程序入门开发实例-自我学习总结插图(1)
    微信小程序入门开发实例-自我学习总结插图(2)
    部署完成后,一定要去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传值
微信小程序入门开发实例-自我学习总结插图(3)
2.本地储存
微信小程序入门开发实例-自我学习总结插图(4)
3.全局的app对象
微信小程序入门开发实例-自我学习总结插图(5)

反向传值:下一页面 --> 上一页面
1.本地储存
微信小程序入门开发实例-自我学习总结插图(6)
2.全局的app对象
微信小程序入门开发实例-自我学习总结插图(7)
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个工作日审核完。
上线,审核通过后即可点击上线。
微信小程序入门开发实例-自我学习总结插图(8)

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

没有账号? 忘记密码?

社交账号快速登录