微信小程序入门实践自我学习总结**次使用

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

微信小程序入门实践自我学习总结**次使用

自学总结

**次使用微信小程序进行开发。 开发内容是人员进出登记管理功能。 主要实现，两个角色登录实现不同的功能微信 小程序开发入门，信息注册、照片上传展示、拨打电话、下拉刷新； 密码设置和密码登录、功能选择、列表循环显示、状态控制改变、时间记录和显示、等待。

由于技术时效性，本文于2020年6月完成； 但这些想法没有时间限制，并且总是值得回顾:)

1. 准备工作

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

申请微信小程序账号、下载安装小程序开发平台、使用小程序开发平台请参考官方文档。 开发模式的选择：小程序云开发请参考云开发文档。 简单来说，实现这个功能不需要准备自己的服务器和域名，并且还有一定的可用空间。 普通的小程序开发首先需要：云服务器可以购买阿里云、腾讯云、天翼云； 我自己购买了阿里云的ECS系统，安装了宝塔面板来运维服务器。 我觉得还是蛮方便的 （了解宝塔：）域名可以在阿里云或者其他地方购买，而且现在注册都是在网上完成的，方便多了； 网站的https和微信要求网站升级为https。 网站建成后，可以花钱购买https相关的部署服务； 当然微信小程序入门实践自我学习总结**次使用，这里有一些免费的方法。 对于阿里云购买的ECS，阿里云提供了免费的SSL证书，但是隐藏的比较深，稍微研究一下就可以找到。 （宝塔面板还提供免费的SSL证书，大家可以自行查看）

使用宝塔面板申请和部署SSL证书：具体步骤请参见

部署完成后，一定要到SSL证书在线测试网站（如）检查是否完整、正常，否则继续检索微信小程序时会出现异常。 我以前也曾入过这个坑。 将服务器的域名添加到微信小程序中，以便小程序可以与服务器通信。 至此，准备工作就完成了。2． 小程序开发

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

2.1 官方开发文档仍然是*好的伙伴和老师

B站的入门教程，我推荐两个实用教程，简单易懂，可以结合实例使用。

1.清华大学：学习制作小程序——实践篇：树洞小程序

2.从零开始玩转微信小程序【黑马程序员】

2.2 一些wxml函数代码示例

如果标志是A，则显示按钮“A”，如果标志是B，则显示按钮“B”，并且在其他情况下，显示按钮“C”。

为了绑定功能，在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> 

页面使用标签来使页面可滑动。

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

使用标签，mode设置图像显示的模式

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

mode的合法值（仅举3个例子，具体参见微信文档）：

数值说明

缩放模式，在不保持宽高比的情况下缩放图像，使图像的宽度和高度完全拉伸以填充图像元素

缩放模式，保持宽高比并缩放图片，使图片的长边能够完整显示。 也就是说，图片可以完整显示。

缩放模式保持图像的长宽比，仅保证图像的短边能够完整显示。 也就是说，图像通常仅在水平或垂直方向上是完整的，而在其他方向上会发生剪切。

使用标签，手机输入框调用文字/号码/密码

// 标签的使用，手机输入框调用文本/数字/密码
<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>

使用标签、页面链接

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

使用标签，页面循环显示

// 设置页面竖向滑动
<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 页面参数传递的三种方法

以下图片部分取自

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等