微信小程序 基本介绍及组件

创建项目

微信开发工具深入介绍

https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

 

基本项目目录

1. 配置介绍

一个小程序应用程序会包括最基本的两种配置文件。一种是全局的 app.json 和 页面自己的 page.json

注意：配置文件中不能出现注释

1.1. 全局配置app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。普通快速启动项目里边的 app.json 配置

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

字段的含义

1. pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

2. window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

3. 完整的配置信息请参考 https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

page.json

这里的 page.json 其实用来表示页面目录下的 page.json 这类和小程序页面相关的配置。

开发者可以独立定义每个页面的一些属性，如顶部颜色、是否允许下拉刷新等等。

页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

视图层

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

数据绑定

　　普通写法

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

组件属性

简直和上面没区别啊

<view id="item-{{id}}"> </view>

Page({
  data: {
    id: 0
  }
})

bool类型

不要直接写 checked="false"，其计算结果是一个字符串

<checkbox checked="{{false}}"> </checkbox>

运算

三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

算数运算

<view> {{a + b}} + {{c}} + d </view>

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

逻辑判断

<view wx:if="{{length > 5}}"> </view>

字符串运算

<view>{{"hello" + name}}</view>

Page({
  data:{
    name: 'MINA'
  }
})

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

列表渲染

wx:for

项的变量名默认为 item wx:for-item 可以指定数组当前元素的变量名

下标变量名默认为 index wx:for-index 可以指定数组当前下标的变量名  index是索引

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

 

渲染一个包含多节点的结构块 block最终不会变成真正的dom元素

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

 

<view wx:for="{{array}}" wx:for-item="val" wx:for-index="key" wx:key="jiakuai">
  <view>{{index +"索引 val是值" + key}}: {{val.message}}</view>
    <view>{{index +"索引" + key}}: {{val.id}}</view>
</view>

    array:[{
      "id": 1,"message":"jllklk"},{ "id":2,
      "message":"klj"}]

wx:key

提高效率使用的

 

事件

<button bindtap="click">按钮</button>
<button bindlongtap="longclick">长按按钮</button>

 // click:function(e){
  //   console.log('lllll')
  //   console.log(e)
  // },
  // longclick:function(){
  //   console.log('长按时间')
  //   // timeStamp: 4798  进入页面知道点击所经历的时间
  // },

传值按钮

<button bindtap="clic" data-val="这是值" data-key="周四">传值按钮</button>

clic: function (e) {

    console.log(e.target.dataset)
  },

条件渲染

wx:if

在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：

<view wx:if="{{condition}}"> True </view>

hidden

<view hidden="{{condition}}"> True </view>

类似 wx:if

频繁切换 用 hidden

不常使用 用 wx:if

 

wxss样式文件

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

与 CSS 相比，WXSS 扩展的特性有：

• 尺寸单位

• 样式导入

尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

 

样式导入

 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

示例代码：

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

<view id="yy" class="oo">将老空间来记录</view>

#yy{
   100rpx;
  height: 80rpx;
  background-color: red
}
.oo{
    100rpx;
  height: 800rpx;
  background-color: yellow
}

内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

• style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

<view style="color:{{color}};" />

• class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

  <view class="normal_view" />

选择器

全局样式与局部样式

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

基本组件

小程序提供了常用的标签组件用于构建页面

view   类似 div

代码

<view hover-class="h-class">
  点击我试试
  </view>
  <!-- wxss -->
  .h-class{
    background-color: yellow;
  }

text

 显示普通的文本 text只能嵌套text

 

代码

 <text selectable="{{false}}" decode="{{false}}">
    普&nbsp;通
  </text>

image

 图片标签，image组件默认宽度320px、高度240px

 注意：该标签 其实是 web中的 图片标签 和 背景图片的结合！！！ 并且不支持以前的web中的背景图片的写法！！！

 

mode 有效值

mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

swiper

微信内置有轮播图组件

默认宽度 100% 高度 150px

swiper

滑块视图容器。

swiper-item

滑块

默认宽度和高度都是100%

video

视频。该组件是原生组件，使用时请注意相关限制

<video src="{{src}}" controls></video>

自定义组件

小程序允许我们使用自定义组件的方式来构建页面。

自定义组件  https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

创建自定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成

声明组件

首先需要在 json 文件中进行自定义组件声明

{
  "component": true
}

 

<view>{{title}}{{name}}</view>
<!-- 组件自定义变量写在my-com.js中组件的属性列表中 -->
<view bindtap="click">自定义组件的点击事件</view>   
<!-- 事件不能直接写在。js里面 yao写在js里面的method里面 -->

 

编辑组件

 同时，还要在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式

 注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
  {{innerText}}
    <slot></slot>
</view>

/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red;
}

注册组件

在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

使用自定义组件

首先要在页面的 json 文件中进行引用声明。还要提供对应的组件名和组件路径

{
    // 引用声明
  "usingComponents": {
      // 要使用的组件的名称     // 组件的路径
    "component-tag-name": "path/to/the/custom/component"
  }
}

页面向自定义组件传递数据

#页面中wxml
<my-con  title="{{变量名}}"><my-con/>

 #再组件中
   properties: {
    title:{
      type:String,
      value:"你好"
    }
  }

组件向页面传值（组件视图）

<view>{{title}}{{name}}</view>
<!-- 组件自定义变量写在my-com.js中组件的属性列表中 -->
<view bindtap="click">自定义组件的点击事件</view>   
<!-- 事件不能直接写在。js里面 yao写在js里面的method里面 -->

主要看data

页面中

<my-com title="555"></my-com>

踩的坑

<!-- 自定义组件中的变量随时变换在导入的地方 直接写title=变量 -->
<my-com title="{{ll}}"></my-com>
<!-- 在自定义组件中自定义一个变量 在引用的地方可以直接传送过来 -->
<!-- 如果自定义组件的变量注释掉就不会显示了在饮用的地方 -->

组件将事件传给页面

 页面
 <my-com title="{{title}}" bind:icre="icre"></my-com>

页面中js
  icre:function(e){
    console.log(e)
    this.setData({
        num:this.data.num+1
    })
  },

组件中的wxml

<button bindtap='clickpush'>加我</button>

组件中的js

clickpush:function(e){
      console.log(e)
      this.triggerEvent("icre",{"index":13},{})
    }

示例二

组件页面

<view bindtap="click">自定义组件的点击事件</view>   
<!-- 事件不能直接写在。js里面 yao写在js里面的method里面 -->

组件。js文件

 /**
   * 组件的方法列表
   */
  methods: {
    click:function(){
      console.log('lljljl')
      this.triggerEvent("icre", {"a":123}, {})
      // 自定义组件触发事件时 需要使用这个方法 指定事件名 detail对象和时间选项
      // ice是个事件 第二个是传参数
    } 
  }
})

使用组件的页面中

<text>{{sum}}</text>  
<!-- sum初始值为零 -->
<my-com title="{{ll}}" bind:icre="click"></my-com>
<!-- 绑定事件是bind不要加tap -->

使用组件页面的js文件中

click:function(e){
    // console.log("****")
    console.log(e.detail.a)
    var _this = this
    var sum = this.data.sum
    _this.setData({
      sum: sum+1
    })
  }
  // 没接收e之前 可以点击sum参数增加
  // 自定义绑定组件传值在抛出页面那个方法第二个参数里传值，获取从e.datail中获取注意是一个对象需要继续点击key

使用组件页面的js文件中

data:{
ll:"随时变话的自定义组件的值",
      sum:0
}