微信小程序（一）

场景：接手的小程序中新增页面功能。
工具：微信开发者工具
下载链接：微信开发者工具 稳定版 Stable Build

一、小程序介绍

项目架构介绍：https://www.php.cn/xiaochengxu-357909.html
部分介绍：
1.1，主体部分主要由3个文件构成

app.js：小程序逻辑，初始化APP

app.json ：小程序配置，比如导航、窗口、页面http请求跳转等

app.wxss：公共样式配置

主体配置完成之后，就是对应的业务开发了，也就是开发者最常操作的页面。小程序页面设计基本上也是遵循 MVC 结构进行构建。

MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，
用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面， 在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。

1.2，页面由4个文件构成

页面目录的文件介绍

js文件：页面逻辑，相当于控制层（C）；也包括部分的数据（M）。

json文件：页面配置，配置一些页面展示的数据，充当部分的模型（M）。

wxml文件：页面结构展示，相当于视图层（V）。

wxss文件：页面样式表，纯前端，用于辅助wxml展示。

二、编辑页面

1.导入项目

ps：注意appid不要使用测试号，测试号无法使用【上传】按钮更新版本的功能。

2.创建页面。

文章：https://www.seoxiehui.cn/article-73381-1.html
采用开发者工具自动创建文件。
在app.json文件中page下输入“目录/目录/文件名称”。
如：“pages/home/home”。保存自动创建文件xx.js、xx.json、xx.wxml、xx.wxss。

2.1如何调试显示当前编辑页面。
文章教程：https://blog.csdn.net/futao__/article/details/110944604
使用开发者工具内设置编译模式，选择对应页面。

3.图标使用

引用font awesome的字体图标。
文章教程：https://blog.csdn.net/qq_28988969/article/details/76633921
最后把文件内容复制到小程序的app.wxss中。

3.1示例

 <i class="fa fa-id-card-o" aria-hidden="true"></i>

更改大小：

其他使用：http://www.fontawesome.com.cn/examples/

4.数据

4.1 数据显示与view语法类似。
在js文件中，初始数据字段。

  /**
   * 页面的初始数据
   */
  data: {
    time:"",
   array: [{ message: 'foo1',number:1 },{ message: 'foo2',number:2 }]
  },

wxml页面显示

<!-- {{data.time}} -->
<text class="fa fa-clock-o fa-fw" aria-hidden="true">时长：{{time}}</text>
				 

附上时差计算工具方法：

https://blog.csdn.net/chunchun1230/article/details/107086651

4.2 数据判断显示
文章资料：https://blog.csdn.net/michael_ouyang/article/details/55049118

			<view class='payment-record' wx:for="{{array}}" wx:key="index">
				<block wx:if="{{item.number=='1'}}">
							<view class='row'>
								<text class="fa fa-car fa-fw" aria-hidden="true"></text>
								<view class="contain-label">
									<view class="contain-text">信息：</view>
									<view class='contain-item'>{{item.message}}</view>
								</view>
							</view>
				</block>
				</view>

5. 上传更新版本

5.1点击【上传】按钮
ps：再次提醒如果没有【上传】就是在导入项目时没有输入正确的appid。

5.2 选择更新类型和版本号、备注。

5.3 扫码登录选择小程序账号。

5.4 在小程序-版本管理。找到提交的新版本，提交审核，内容不是必填可跳过。

5.4 等待审核 时间一般是1-7天。

ps：注意js中的ajax是异步执行的，多方法一起执行请求ajax接口，打印会出现顺序不对的情况。
–end 待续