微信小程序学习回顾-1.2.1-【零基础】

前端开发

• 工具准备（微信开发者工具）
• 基础知识：代码框架
• 前端实现思路梳理
• 各功能页面开发实操

---

基础知识

* 项目新建

下载好开发者工具后打开，可以选择新建或导入项目。填写项目名称，目录会自动生成。填写AppID，语言选择JS。（云开发还不知道用，后续看情况再补充。）

36R9y9.png

---

* 代码框架认识

小程序中的各个功能页面展示在pages文件夹中，在示例中有lindex和log两个页面。
每个页面中会自动生成四个不同后缀的文件：

• .wxml是页面的框架，像是房屋的墙、梁、等部件；
• .wxss是页面的样式，像是墙上各色各样的灰浆、梁上的装饰；
• .json是页面的静态配置，像是房屋周围划定的建造范围，一旦确认了，不主动去改就不会变；
• .js，如果说以上三个文件是展示给用户看的视图层，那.js就是隐藏在视图层下的逻辑层，就像房屋里布置的门、窗、电梯，沟通着不同的房间。

组成功能页面的四个文件

除了pages文件夹外，还有app.js/json/wxss三个文件：

• .js是全局逻辑，里面可以存放全局变量globalData，用于其他功能页面调用；
• .json里是全局（除page外的空间）配置，对所有页面生效（如功能页面在其.json中有配置，则以功能页面配置为准）。在这里定义了可以有多少页面（page）;
• .wxss里是全局样式，对空间大小（尺寸）、定位、颜色、文字样式、布局作出限制。

app.js/json/wxss文件 app.json

---

* 代码框架补充说明

框架这块，涉及到html、css、JS三种语言的基本知识，在网站菜鸟教程中学习，再结合微信平台中的说明。
菜鸟教程

.wxml类似html，不同之处，主要有两点：

1. 一些常用标签打包成了组件，如view/button/text/map等等。

• 可以通过属性传递值给组件，让组件可以以不同的状态去展现
  <map longitude="广州经度" latitude="广州纬度"></map>
• 组件的内部行为也会通过事件的形式让开发者可以感知
  <map bindmarkertap="markertap" longitude="广州经度" latitude="广州纬度"></map>

对于零基础而言，暂时知道标签对（组件）、属性名值对、事件响应就够了。
在课程示例小程序中，用到了组件view/text/textarea/image/input/button/scroll-view；
公共属性class/id/style、组件特有属性placeholder/src/open-type/scroll-y;
事件响应bindtap/bindinput/bindgetuserinfo;

2. 视图层/渲染层和逻辑交互层分开，借用wx:if 这样的属性以及 {{ }} 这样的数据绑定表达式控制；
   示例中,

• 数据绑定赋值给属性
  <text class="bottomtapText" style="color:{{seccol}}">我的</text>
<image class="touxiang" src="{{face_url}}"></image>
• 也可以进行判断

<image class="like" src="{{itemName.islike==1? '/image/ikeplus.png':'/image/like.png'}}" bindtap="like" id="{{itemName.id}}"></image>

• 同wx:for/if配合执行列表/条件渲染
  <block wx:for="{{showdata}}" wx:for-item="itemName" wx:for-index="id">
<text class="num" wx:if="{{itemName.total_likes!=0}}">{{itemName.total_likes}}</text>

---