微信小程序制作源码 第1篇
Page({
data: {
iconSize: [20, 30, 40, 50, 60, 70],
iconType: [
‘success’, ‘success_no_circle’, ‘info’, ‘warn’, ‘waiting’, ‘cancel’,
‘download’, ‘search’, ‘clear’
iconColor: [
‘red’, ‘orange’, ‘yellow’, ‘green’, ‘rgb(0,255,255)’, ‘blue’, ‘purple’
可以通过 color属性来修改颜色
可以通过 color属性来修改颜色
=====================================================================================================================================================
类似vue或者react中的自定义组件
⼩程序允许我们使⽤⾃定义组件的⽅式来构建⻚⾯。
. 创建⾃定义组件
类似于页面，一个自定义组件由 json wxml wxss ``js 4个文件组成
可以在微信开发者⼯具中快速创建组件的⽂件结构
在⽂件夹内 components/myHeader ，创建组件 名为 myHeader
⾸先需要在组件的 json ⽂件中进⾏⾃定义组件声明
微信小程序制作源码 第2篇
（1）view 普通视图区域，类似于HTML中的div，是一个块级元素，常用来实现页面的布局效果。
（2）scroll-view 可滚动的视图区域，常用来实现滚动列表效果
（3）swiper和swiper-item 轮播图容器组件和轮播图item组件
（1）flex横向布局效果
.wxml文件（结构）：
.wxss文件（样式）：
wxml文件：
wxss文件：
纵向滚动：
实现轮播图，一个swiper-item是一个轮播图(左右拖动）
wxml文件：
添加class=”swiper-container”
wxss文件：
.wxss文件中添加背景颜色：（注意，前面没有.）
拖动效果不太明显，会有“拉不动”的感觉，从view右下角直接拉过去，直到实现。
（1）text
文本组件，类似于HTML中的span标签，是一个行内元素；
基本使用：通过text组件的selectable属性，实现长按选中文本内容的效果；
预览，手机上选中会出现复制、全选。
（2）rich-text
富文本组件，支持把HTML字符串渲染为WXML结构
通过rich-text组件的nodes属性节点，把HTML字符串渲染为对应的UI结构。
（1）button 按钮组件，功能比HTML中的button丰富，通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）
wxml文件中：
文件中_style_: _v2_,控制按钮样式（v2表示新版样式）：
我删掉代码样式也没有改变，可能现在已经默认v2版本了吧。
（2）image 图片组件，image组件默认宽度约300px、高度约240px
微信小程序制作源码 第3篇
Component({
properties: {
// 这里定义了innerText属性，属性值可以在组件使用时指定
innerText: {
// 期望要的数据是 string类型
type: String,
value: ‘default value’,
data: {
// 这里是一些组件内部数据
someData: {}
methods: {
// 这里是一个自定义方法
customMethod: function(){}
. 声明引⼊⾃定义组件
⾸先要在⻚⾯的 json ⽂件中进⾏引⽤声明。还要提供对应的组件名和组件路径
// 引用声明
“usingComponents”: {
// 要使用的组件的名称 // 组件的路径
“my-header”:“/components/myHeader/myHeader”
. ⻚⾯中使⽤⾃定义组件
用来替代slot的
. 其他属性
. 定义段与⽰例⽅法
component构造器可⽤于定义组件，调⽤component构造器时可以指定组件的属性、数据、⽅法等。
| 定义段 | 类型 | 是否必填 | 描述 |
| — | — | — | — |
| properties | Object Map | 否 | 组件的对外属性，是属性名到属性设置的映射表，参⻅下⽂ |
| data | Object | 否 | 组件的内部数据，和 properties⼀同⽤于组件的模板渲染 |
| observers | Object | 否 | 组件数据字段监听器，⽤于监听 properties 和 data 的变化，参⻅ 数据监听器 |
| methods | Object | 否 | 组件的⽅法，包括事件响应函数和任意的⾃定义⽅法，关于事件响应函数的使⽤，参⻅ 组件事件 |
| created | Function | 否 | 组件⽣命周期函数，在组件实例刚刚被创建时执⾏，注意此时不能调⽤ sseettDDaattaa ，参⻅ 组件⽣命周期 |
| attached | Function | 否 | 组件⽣命周期函数，在组件实例进⼊⻚⾯节点树时执⾏，参⻅ 组件⽣命周期 |
| ready | Function | 否 | 组件⽣命周期函数，在组件布局完成后执⾏，参⻅ 组件⽣命周期 |
| moved | Function | 否 | 组件⽣命周期函数，在组件实例被移动到节点树另⼀个位置时执⾏，参⻅ 组件⽣命周期 |
| detached | Function | 否 | 组件⽣命周期函数，在组件实例被从⻚⾯节点树移除时执⾏，参⻅ 组件⽣命周期 |
. 组件-自定义组件传参
⽗组件通过属性的⽅式给⼦组件传递参数
⼦组件通过事件的⽅式向⽗组件传递参数
⽗组件 把数据 {{tabs}}传递到 ⼦组件的 tabItems 属性中
⽗组件 监听 onMyTab 事件
⼦组件 触发 bindmytap 中的 mytap 事件
①. ⾃定义组件触发事件时，需要使⽤ triggerEvent ⽅法，指定事件名、detail 对象
微信小程序制作源码 第4篇
接触小程序一年多，真实体验就是小程序开发门槛相对而言确实比较低。不过小程序的开发方式，一直是开发者吐槽的，如习惯了 Vue，React 开发的开发者经常会吐槽小程序一个 Page 必须由多个文件组成，组件化支持不完善或者说不能非常愉快的开发组件。在以前小项目中没太大感觉，从加入有赞，参与有赞微商城小程序的开发，是真切的体会到对于大型小程序项目开发的复杂性。
有赞从微信小程序内测就开始开发小程序，在不支持自定义组件的时代，只能通过 import 的形式拆分模块或实现组件。在业务复杂的页面，可能会 import 非常多的模块，而相应的 wxss 也需要 import 样式，除了操作繁琐，有时候也难免遗漏。
作为开发者，我们当然希望可以让工作更简单，更愉快，也希望改善我们的开发方式。所以希望能够更了解微信小程序框架，减少不必要的试错，于是有了一次对小程序框架的 debug 之旅。(基础库 )
通过三周空余时间的 debug，也算对小程序框架有了一些浅显的认识，达到了最初的目的；对小程序启动，实例，运行等有了真切的体会。这篇文章记录了小程序框架的基本代码结构，启动流程，以及程序实例化过程。
本文的目的是希望把我看到的分享给对小程序感兴趣或者正在开发小程序的读者，主要解答“框架对传入的对象等到底做了什么”。
微信小程序制作源码 第5篇
小程序官方把API分为3类：
特点：以on开头，用来监听某些事件的触发
举例：(funvtion callback)监听窗口尺寸变化的事件
特点：以Sync结尾的API都是同步API，同步API的执行结果，可以通过函数返回值直接获取吗，如果执行出错会抛出异常
举例：(‘key’,’value’)向本地存储中写入内容。
特点：类似于jQuery中的$.ajax(options)函数，需要通过success、fail、complete接收调用的结果
举例：()发起网络数据请求，通过success回调函数接收数据。
微信小程序制作源码 第6篇
在开发者工具中使用 help() 方法，可以查看一些指令和方法。使用其中的 openVendor 方法可以打开微信开发者工具在小程序框架所在目录。其中以包括以基础库命名的目录和其他帮助文件，如其中有两个工具 wcc，wcsc。wcc 可把 wxml 转换为对应的 JS 函数 —— $gwx(path, global)，wcsc 可将 wxss 转换为 css。而基础库目录包括 和 文件。小程序框架在开发者工具中以 命名（ 不知其作用，听说在真机环境使用该文件）。
在开发中工具命令行使用 可以查看到小程序的启动流程大致如下：
以小节的方式分别介绍这些流程，小程序是如何处理的（小节编号与图中编号相同）。
下图是小程序启动是初始化的一些全局的变量：
那些使用“__”开头，未在文档中提及可使用变量是不建议使用的，__wxAppCode__ 在开发者工具中分为两类值，json 类型和 wxml 类型。以 .json 结尾的，其 key 值为开发者代码中对应的 json 文件的内容，.wxml 结尾的，其 key 值为通过调用 $gwx('./pages/example/') 将得到一个可执行函数，通过调用这个函数可得到一个标识节点关系的 JSON 树。
使用工具对 进行格式化后进行 debug。可以发现小程序框架大致由： WeixinJSBridge、 NativeBuffer、 wxConsole、 WeixinWorker、 JavaScript兼容（这部分为猜测）、 Reporter、 wx、 exparser、 __virtualDOM__、 __appServiceEngine__ 几部分组成。
其中除了 wx 和 WeixinJSBridge 这两个基础 API 集合， exparser, __virtualDOM__, __appServiceEngine__ 这三部分作为框架的核心， __appServiceEngine__ 提供了框架最基本的接口如 App，Page，Component； exparser 提供了框架底层的能力，如实例化组件，数据变化监听，view 层与逻辑层的交互等；而 __virtualDOM__ 则起着链接 __appServiceEngine__ 和 exparser 的作用，如对开发者传入 Page 方法的对象进行格式化再传入 exparser 的对应方法处理。
框架对外暴露了以下API：Behavior，App，Page，Component，getApp，getCurrentPages，definePlugin，requirePlugin，wx。
在小程序中，开发者的 JavaScript 代码会被打包为
这里的 define 是在框架中定义的方法，在框架中提供了两个方法：require 和 define 用来定义和使用业务代码。其方式有些像 AMD 规范接口，通过 define 定义一个模块，使用 require 来应用一个模块。但是也有很大区别，首先 define 限制了模块可使用的其他模块，如 window，document；其次 require 在使用模块时只会传入 require 和 module，也就是说参数中的其他模块在定义的模块中都是 undefined，这也是不能在开发者工具中获取一些浏览器环境对象的原因。
在小程序中，JavaScript 代码的加载方式和在浏览器中也有些不同，其加载顺序是首先加载项目中其他 js 文件（非注册程序和注册页面的 js 文件），其次是注册程序的 ，然后是自定义组件 js 文件，最后才是注册页面的 js 代码。而且小程序对于在 以及注册页面的 js 代码都会加载完成后立即使用 require 方法执行模块中的程序。其他的代码则需要在程序中使用 require 方法才会被执行。
下面详细介绍了 ，自定义组件，页面 js 代码的处理流程。
在 加载完成后，小程序会使用 require('') 注册程序，即对 App 方法进行调用，App 方法是对 方法的引用。
下图是框架对于 App 方法调用时的处理流程：
App 方法根据传入的对象实例化一个 app 实例，其生命周期函数 onLaunch 和 onShow 因为使用不同的方式获取 options的参数。在有些需要根据场景值来实现需求的，或许使用 onShow 中的场景值更合适。