微信小程序入门笔记

这篇文章上次修改于 2006 天前，可能其部分内容已经发生变化，如有疑问可询问作者。

小程序的框架系统分为两部分：视图层（View）和逻辑层(App Service).

配置

1.创建之后自动生成4种文件：①json配置文件。

②js：逻辑层文件

③wxml。相当于html文件

④wxss，相当于css样式
2.全局配置:app.json

page(查看页面路径)、window(设置状态栏、导航栏、标题、窗口背景色）、tabBar(切换页面)、Debug(在控制台页面显示调试信息)

eg:"tabBar": {
    "color": "black",					//tab 上的文字默认颜色
    "selectedColor":"blue",				//tab 上的文字选中时的颜色
    "backgroundColor":"#fff",			//tab 的背景色
    "list":[{
	  "pagePath":"pages/index/index",      //页面路径，必须在 pages 中先定义
	  "text":"首页",					  	 //tab 上按钮文字
      "iconPath":"images/f1.png",		   //图片路径
      "selectedIconPath":"images/f1_on.png" 	//选中时的图片路径
    },{
      "pagePath": "pages/statistic/statisitic",
      "text": "练习1",
      "iconPath":"images/f3.png",
      "selectedIconPath":"images/f3_on.png"
    },{
      "pagePath": "pages/test/test",
      "text": "练习2",
      "iconPath": "images/loves.png",
      "selectedIconPath": "images/lover.png"
    }]
}

3.页面配置：json文件夹中配置会覆盖app.json中window相同的配置项

逻辑

1.APP()函数----注册下程序，接受一个Object参数，指定小程序的生命周回调等，必须在app.js中调用切只能调用一次。

Object参数：

onLauch():生命周期回调–监听小程序初始化（全局只能触发一次）

onShow:监听小程序显示，小程序启动时触发或后台进入前台显示时触发

onHide():监听小程序隐藏，小程序从前台进入时触发

onEroor:错误监听函数,页面发生脚本错误时触发

onPageNotFound:页面不存在监听函数，打开页面不存在时触发

2.getApp(Object)：全局的 getApp() 函数可以用来获取到小程序 App 实例。

实例：var appInstance = getApp(){

console.log(appInstance.globaIData);

}

3.路由：在小程序中所有页面的路由全部由诳街进行管理。

路由的方式有两种：1.调用API 2.使用组件

4.文件作用域：在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。

5.模块化：可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。

视图层

1.wxml:数据绑定、列表渲染、条件渲染、模板、事件、引用

①数据绑定：、 id=“item-”

②列表渲染wx:for

eg:

<!--  for遍历九九乘法表  -->
<!--  
  1*1=1
  2*1=2 22=4 2*3=6
  3*1=3 32=6 3*3=9
 -->
 <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
    <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j"  style="display:inline-block;width:20%;">
      <view wx:if="{{j <= i}}">
         {{i}}{{j}}={{ij}}
      </view>
    </view>
 </view>

注意：花括号和引号之间如果有空格，将最终被解析成为字符串

③条件渲染:wx:if

eg:

wxml:<view wx:if="{{id==1}}">第一条</view>
	 <view wx:elif="{{id > 4}}">大于4的条件</view>
	 <view wx:else="{{id > 7}}">大于7</view>
js:data: {
      id:8, 
  }
----------------------------------------------------
<!--  hidden在view中不生效，text有效  -->
<text hidden="{{true}}">这是一段文本</text>
<view hidden="{{true}}">这是一段文本</view>
----------------------------------------------------
<block wx:if="{{true}}">
  <view>这里的block标签名可以随便起</view>
  <view>相当于一个控制属性</view>
</block>

注意： block并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

④模板:template

wxml: <template name="obj">
        <view>第一个对象：{{a}}</view>
        <view>第二个对象：{{b}}</view>
 		<view>{{temname}}</view> 
	  </template>
	  <!-- 使用模板 -->
 	  <template is="obj" data="{{a:1, b:2,temname:name}}"></template> 
 	  <template is="obj" data="{{...obj,temname:name}}"></template> 
js:   data: {
      	obj:{
        	a: 1,
        	b: 3
        }  
  	  }

⑤事件:绑定事件: bindtap | 停止事件冒泡：catchtap

事件中的事件对象：target：事件触发的源头 currentTarget:事件绑定的源头 dateset:事件源组件上由data-开头的自定义属性组成的集合

更多事件可以查看文档，这里就不一一进行说明了

⑥引用:

import:只会引用目标文件夹中的template

inclde:只会引用除template外的代码

eg:
<import src="item.wxml" />
<template is="item" data="{{name:'一颗小白菜'}}"></template>

<include src="item.wxml" />
item.whtml:
<view>我是item.wxml</view>
<template name="item">
  <text>我是item.wxml中的{{name}}</text>
</template>

2.wxss: 模块、变量、运算符、语句、数据类型、基础类库

尺寸单位：rpx eg:在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

样式导入：@import 必须放在css文件最顶部

内联样式：

选择器：.class、#id、element、element, element、::after、::before

全局样式与局部样式：定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

组件

1.视图容器：view、scroll-view(可滚动视图区域)、swiper(滑块视图容器)、movable-area(可移动区域)、cover-view

2.导航：navigator

3.媒体组件：audio、video、image、camera、live-player(实时音视频播放)、live-pusher(实时音频录制)

4.开放能力：open-data(用于展示微信开放的数据)、web-view(用来承载网页的容器，会自动铺满整个小程序页面)、ad(广告)、official-account(用户扫码打开小程序时，开发者可在小程序内配置公众号关注组件，方便用户快捷关注公众号，可嵌套在原生组件内)

5.地图：map 画布:canvas