微信小程序学习笔记（阶段一）

一阶段学习过程：

　　（一）看官方文档的简易教程：https://mp.weixin.qq.com/debug/wxadoc/dev/

　　（二）看小码哥视频：https://chuanke.baidu.com/v2040981-197486-1133724.html

　　（三）模仿并写出一个计算器小程序demo

项目结构：

　　pages：存储这各个页面的文件夹

　　pages内的文件夹（初始有index、logs）：分别存储这每个页面，其中一般包含三种文件，*.js、*wxml、*wxss

　　utils：里面装有一个util.js文件，该文件封装着各种工具方法

　　app.js：整个小程序周期的相关逻辑

　　app.json：用于注册页面，定义一些全局信息或整个程序相关信息等公共信息

　　app.wxss：全局公共样式表

文件类型介绍：

　　*.js：定义各种逻辑处理的文件

　　*.wxml：定义页面组件的文件，相似于html（这里是基于html5，名字wx是微信的意思，ml则是html的后两个字母）

　　*.wxss：定义组件样式的样式表，相似于css

　　*.json：用于配置相关信息的文件

添加页面：

　　①在pages添加一个页面文件夹

　　②在新增的文件夹内添加.wxml文件及.js文件（.wxss和.json可选）

　　③在.js中添加page项（输入pa后自动联想，然后选择Page会自动创建好）

　　④在app.json中的“pages”项中注册页面

定义/修改/使用页面变量：

　　定义：

　　　　在本页面的*.js文件中的data项中定义，格式如：

  data: {
    text: "this is Macrazd",
    res: "0",
    lastIsOperator:false,
    arr:[],
    logs:[]
  },

　　使用：

　　　　在本页面的*.wxml中使用，格式如：

  <block wx:for="{{logs}}" wx:for-item="log">
    <view class="item">
      <view class="text">{{log}}</view>
    </view>
  </block>

　　注：这里的<block wx:for="{{logs}}" wx:for-item="log">标签的意思是以logs这一数组作循环生成<view class="item"><view class="text">{{log}}</view></view>

　　读取/修改：

　　　　在本页面的*.js中任一方法中修改data中的变量值，格式如：

//读取：
console.log(this.data.text);
//修改
this.setData({data:"123"});

　　注：这里的console.log(var);的作用是在控制台输出内容

定义和调用方法：

　　在*.js中定义一个方法的格式如下：

test: function(){
  console.log(this.data.text);
}
/*
函数名:function(){
  方法体
}
*/

　　在*.wxml中调用*.js中的逻辑方法的格式如下：

<view bindtap="btnClick">back</view>

个人感想：

　　在学习前在知乎上看到有人说，只要粗略会一些html、css、js就可以很快上手微信小程序。在我下载了官方开发工具之后，看到文件结构还是挺简洁的，但是看到这两种文件的格式*.wxml、*.wxss，一下就懵了，*.json也不知道是用来干什么的（本人刚入门，没学过json）。之后我就开始看官方文档，粗略看完了简易教程之后，有了简单的了解，但还是没什么概念，于是就去看了小码哥的视频，才发现wxml是html5的改版，wx是指微信，ml就是html的后面两个字母，wxss和css同理，这瞬间就开窍了。之后在学习过程中，虽然有些和之前所学的网页设计的内容有一些区别，但还是比较快就能上手的。

　　所以总的来说，只要了解过网页设计，再稍微理解一下文件的框架结构，基本上入手来说是问题不大的（至少对我来说是这样的）。