微信小程序开发概念与总结

环境搭建

微信公众平台下载软件

工具使用

官方DEMO下载，导入hello-world。

项目目录结构

逻辑图
    App Instance     ---------------》 Page2
        配置 app.json
        逻辑 app.js
        样式 app.wxss
     |
    Page1
        page1.js
        page1.wxml
        page1.json
        page1.wxss
    Utils
        fetch.js
        calc.js
项目结构图
    project_root
        pages
            index
                index.js
                index.wxml
                index.wxss
            logs
                logs.js
                logs.json
                logs.wxml
                logs.wxss
        utils
            util.js
        app.js
        app.json
        app.wxss

文件作用

app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
app.js
    用来创建应用程序实例对象
    定义应用程序的生命周期事件
app.wxss
    定义样式的样式文件
app.wxml
    程序的页面
index.js
    逻辑实现
index.wxml
    类似html，定义页面结构 
    微信markup语言
    基于xml进行扩展的，定义页面的结构
index.wxss
    完全遵循css语法
    约定大于配置
log.json
    覆盖app.json的配置选项（一般都是对windows的配置）

小程序的配置

app.json和每个文件夹下的配置json文件
    app.json配置内容
        pages
            不需要扩展名
            定义都有哪些页面组成的
            示例代码
                "pages": [
                    "pages/index/index",
                    "pages/logs/logs"
                ]
        window
            窗口的样式配置
            示例代码
                "window": {
                    "navigationBarBackgroundColor": "#ccc",
                    "navigationBarTitleText": "微信小程序",
                    "navigationBarTextStyle": "black",
                    "backgroundTextStyle": "light",
                    "backgroundColor": "#f0f",
                    "enablePullDownRefresh": true
                  }    
        debug
            开启调试模式
            示例代码
                "debug": true
        tabBar
            标签栏
            底部 tab 栏的表现
            最多配置5个，最少配置2个
            示例代码：
                "tabBar": {
                    "selectedColor": "#fff",
                    "list": [
                        {
                            "text": "Home",
                            "pagePath": "pages/index/index"
                        },
                        {
                            "text": "Home",
                            "pagePath": "pages/index/index"
                        }
                    ]
                }    
        networkTimeout
            网络超时时间        
    每个页面的配置文件设置内容
        只能修改window下的配置，覆盖app.json中的配置文件

逻辑层与界面层分离架构

逻辑编码

由js完成，处理页面事件
js与平时js不同
    // 小程序不是运行在浏览器中，没有bom和dom对象
    // console.log(window); // undefined
    // console.log(document);  //undefined
    // 小程序中有额外的一些成员
    // App 用于定义应用程序实例对象
    // Page 方法用于定义页面对象
    // getApp  用来获取全局应用程序对象
    // getCurrentPages 用来获取当期页面的调用栈
    // wx对象用来调用核心API
    // 小程序支持CommonJs规范的
    // module.export={}
    // require调用
    // 不支持exports.say方式
可能存在使用ES6不兼容情况

界面层

wxml
wxss
展示逻辑层的数据
数据绑定

//index.js
//获取应用实例
const app = getApp()

Page({
  // 用来给页面提供数据的
  // 界面和逻辑之间的桥梁
  data: {
	message: 'Mine hello world',
	person: {
	  name: 'zhangsan'
	},
	// view的class类
	viewClassName: 'hello'
  }
})
//index.wxml
<!-- 明确数据在哪儿  当前页面的js文件的data中-->
<!-- 数据绑定在那里 使用小胡子进行输出-->
<!-- 框架最大的特点就是需要按照规定的方式执行代码 -->
<view class="container">
  <!-- 完成绑定数据-->
  <!-- 以下的语法叫小胡子语法 -->
  <text>{{ message }}</text>
  <text>{{ person.name }}</text>
  <!-- mustche语法可以使用在 -->
	<!-- innerHTML -->
	<!-- 元素属性 -->
	<!-- 不能用语言标签名和属性名上 -->
  <view class="web {{ viewClassName }}"></view>
  <!-- 可以使用字面量和简单的逻辑运算符 -->
  <text>
	{{ "hello" }}
  </text>
  <text>
	{{ 111+999 }}
  </text>
  <text>
	{{ true }}
  </text>
  <text>
	{{ 100 > 50 ? 'you right': 'wrong' }}
  </text>
  <!-- js双引号里面都是true -->
  <!-- 将语法解析误解了true/false -->
  <checkbox checked="true"></checkbox>
  <checkbox checked="false"></checkbox>
  <checkbox checked="{{ true }}"></checkbox>
  <checkbox checked="{{ false }}"></checkbox>
</view>

页面渲染

<!-- 列表渲染实现效果 -->
<!-- 如果item已经被定义了，那么此时会产生冲突，回到用不到item -->
<!-- 可以通过wx:for-item="aaa" 解决次冲突 -->
<!-- 可以通过wx:for-index="i"获取索引 -->
<!-- wx:if根据布尔值显示是否隐藏 -->
<view>
<view wx:for="{{ todos }}">
  <checkbox checked="{{ item.completed }}"></checkbox>
  <text>{{ item.name }}</text>
</view>
</view>	

事件处理

<!--index.wxml-->
<!-- 事件处理 -->
<view class="container">
  <!-- 基本的事件使用，通过给组件添加对应的属性，然后定义对应的方法就可以了 -->
  <button bindtap="buttonTapHandler">点我</button>

  <!-- 事件冒泡 -->
  <!-- 利用bindtap会有事件冒泡的产生，解决通过catchtap进行调用 -->
  <view style="width: 200px; height: 200px; background-color: red;"
	catchtap="outerHandler">
	<view style="width:100px; height:100px; background-color:blue;"
	  catchtap="innerHandler">
	</view>
  </view>

  <!-- 事件传参 -->
  <!-- 1.事件基本使用bindtap catchtap -->
  <!-- 2.事件中的冒泡使用的是catchtap解决冒泡的问题 -->
  <!-- 3.如果给事件处理函数传递参数，那么通过data-传递参数 -->
  <!-- dataset指的是元素上所有以data-开头的属性的集合 -->
  <!-- 但是不要有多个短横线链接 -->
  <button bindtap="handle" data-id="1">事件传参1</button>
  <button bindtap="handle" data-id="2">事件传参2</button>
</view>

//获取应用实例
const app = getApp()

Page({
  buttonTapHandler: function(e){
	console.log("click Me");
	console.dir(e);
  },
  innerHandler: function(){
	console.log("inner");
  },
  outerHandler: function(){
	console.log("outer");
  },
  handle: function(e){
	console.log('handle ...');
	// 事件处理函数中的this指向的还是页面对象
	// console.log(this);
	console.dir(e.target.dataset);

	
  }
})

以上是此次微信小程序开发的相关概念与总结。下篇继续。