微信小程序填坑之路

小程序简要

       「微信之父」张小龙是这样述小程序的：

       小程序是⼀个不需要下载安装就可使用的应用，它实现了应用触 ⼿可及的梦想，用户扫⼀扫或者搜⼀下即可打开应用。也体现了用完 即⾛的理念，用户不用关⼼是否安装太多应用的问题。应用将⽆处不 在，随时可用，但又⽆需安装卸载。 简单来说，小程序不用安装就能使用；它的体积也非常小，每一 个都不超过 2M。(2.2.4以上支持分包加载)可扩展之4M

开发工具:  微信web + iView Weapp

                                    

                                    

 

目录

小程序简要... 1

微信小程序 框架（MINA）... 3

文件结构... 3

小程序配置... 4

小程序尺寸单位... 4

逻辑层... 5

wxml. 5

<view>. 5

<text>. 5

wx:if  vs hidden. 6

wx:for 7

事件 bindtap. 7

组件和模板... 8

js. 10

Page(Object) 10

data 初始化数据和赋值... 10

Ajax. 11

缓存API 11

路由跳转... 12

页面返回data赋值... 13

返回后刷新页面... 14

自定义微信好友分享... 14

json. 14

wxss 14

工具调试... 15

微信小程序 框架（MINA）

文件结构

MINA程序包含一个描述整体程序的app和多个描述各自页面的page。

一个MINA程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件类型	必须	作用
app.js	是	小程序逻辑
app.json	是	小程序公共设置
app.wxss	否	小程序公共样式表

       页面由四个文件组成，分别是：

文件类型	必须	作用
wxml	是	页面结构
wxss	否	页面样式表
json	否	页面配置
js	是	页面逻辑

注意：为了方便开发减少配置项，规定描述页面的这四个文件必须具有相同的路径与文件名。

小程序语言和Html、CSS 和 JavaScript —— 区别不大

       差异部分：

1. HTML 与WXML :两者区别较大 WXML去除了大部分的标记语言（div,p,span,ul>li,a ….），只保留了常用表单(input, checkbox,label，textarea) ，小程序常用的标签 <view>,<image>,<text>。
2. WXSS 与 CSS：两者在语言上几乎没有差别，可以直接通用。
3. JS 文件：小程序的 JS 文件与前端开发使用的 JS 几乎没有 区别，小程序的 JS 新增了微信的一些 API 接口，并去除了 一些不必要的功能（如 DOM）。 在语言上，小程序完全向学习成本最低的前端开发看齐，但这不 代表所有前端开发者都能直接无缝迁移

小程序配置

       app.json  文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、分包的配置、设置网络超时时间、设置多 tab 等。

参考链接

小程序尺寸单位

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

                    

【rpx】rpx其实是 微信对于rem的一种应用的规定，或者说一种设计的方案，官方上规定屏幕宽度为20rem，规定屏幕宽为750rpx。     

【rem】在做移动端适配是最常用的方法就是使用rem作为单位，因为rem是根据html的fontsize去动态计算实际的px的。

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

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

参考链接

逻辑层

      wxml

<view>

WXML 和 WXSS 两种文件是小程序界面元素声明及样式，述文 件。WXML 最大的特点是以视图（view）的方式串联界面元素，并 通过程序逻辑（AppService），将信息更新实时传递至视图层。 view 类似于 HTML 中的 div 元素。在构建的时候，view 可 以被多级嵌套，view 内可以放置任意视觉元素。

<text>

       text标签类似于  html中的 span  属于文本标签

       但是有些不同

1. 默认<text>标签是同一行，标签中的数据依次显示
2. <text>标签不在同一行有回车操作，页面显示从回车  位置进行换行

回车换行

跨标签不显示

解码显示空格 decode (&emsp)

页面渲染也是数据驱动，和vue类似

小程序页面显示数据是通过 {{}} 进行渲染

       wx:if，wx:for 判断的时候也是需要通过 {{}} 获取数据的, 和vue操作有些不同

index.wxml

<view>{{ app }}</view>

<view wx:if="{{isshow}}">{{ app }}</view>

<view wx:elif="{{isshow == 1}}">{{ app }}+1</view>

<view wx:else>以上判断都不存在</view>

<block wx:for="{{list}}" wx:key>

   <view >{{ item }}---{{index}}</view>

</block>

index.js

Page({

  /**

   * 页面的初始数据

   */

  data: {

           isshow: true,

           app:  "Hello world",

           list: [1,2,3]

       }

})

wx:if  vs hidden

wx:if 判断语句是可以使用 三元表达式的

wx:elif 再次判断

wx:else

 

hidden 就简单的多，视图始终会被渲染，只是简单的控制显示与隐藏。

       (没有wx前缀，true 隐藏dom,false 显示dom)

注意：页面不可以使用js内置的方法 (indexof(),JSON.parse(),tostring() ......)

 <view wx:if="{{lsit.indexOf(1)}}">页面不可以使用js 逻辑处理</view>

当然视图层也支持  WXS (WeiXin Script)脚本语言的,可以实现写逻辑处理

WXS的使用，有两种方式

1. 一种是直接在WXML中编写
2. 二、WXS文件的构成

    页面通过 <wxs>引入, module="filter" 声明

<text>商品金额{{filter.moneyFormat(sum_price)}}元</text>

<wxs src="../../utils/filter.wxs" module="filter" />

filter.wxs

var moneyFormat = function (money) {

  if (money){

    return parseFloat(money.toString()).toFixed(2);

  }else{

    return '0.00'

  }

}

module.exports = {

  moneyFormat: moneyFormat

}

    注意：wxs脚本不支持 ES6的写法，（for in和for of）forEach

Wxs参考链接

wx:for

1. 使用 wx:for-item 可以指定数组当前元素的变量名
2. 使用 wx:for-index 可以指定数组当前下标的变量名

 

<block wx:for="{{list}}" wx:key wx:for-index="indexs">

   <view >{{ item }}---{{ indexs}}</view>

</block>

在循环的时候 要加上  wx:key 提高性能

       Now you can provide attr "wx:key" for a "wx:for" to improve performance.

事件 bindtap

wxml中使用bindtap绑定相应的事件

       bindtap事件传惨

       data-*   ——>  *为参数的key

<view id='test' data-id='10' bindtap='test'>

 bindtap事件

</view>

打印参数：console.log(event.target.dataset.id)

组件和模板

模板 独立的*.wxml文件

使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段

<template name="msgItem">

  <view>

    <text> {{index}}: {{msg}} </text>

    <text> Time: {{time}} </text>

  </view>

</template>

模板引入  WXML 提供两种文件引用方式import和include。

import

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，

<import src="../dist/index.wxml"/>

<template is="msgItem" data="{{...item}}"/>

include

include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置，如：

<include src="../dist/index.wxml"/>

组件 可page页面一样 *.wxml、*.js、*.json、*.wxss

     小程序组件和vue中自定义组件类似，使用组件需要在 **.json进行注册。

Component 构造器

 

"use strict";

Component({

  externalClasses: ["i-class"], // 使用外部class

  properties: {

    type: {

      type: String,

      value: "info"

    },

  },

  data: {

  },

  methods: {

    handleTap: function() {

    this.triggerEvent("click")

    }

  }

});

组件上写法

<view class='i-class'>i-row组件</view>

外部class 的使用

组件触发父组件事件

      this.triggerEvent("click", item)

使用 bind:click="tapButtons"

<i-tag buttons="{{buttons}}" bind:click="tapButtons"></i-tag>

注意：在使用模板或组件，在组件中如有使用本地图片是需要注意图片的路径，图片路径是按照使用组件页面位置查找的相对路径。

组件文档

js

Page(Object)

       js和web中使用的 javascript一样，小程序新加了些接口

       Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

Page生命周期文档

data 初始化数据和赋值

data 是页面第一次渲染使用的初始数据。 JSON的类型

此data和vue中的js层中的data(){....}一致

data赋值与vue有些不同

      

       this.data.num = 1

       这种直接赋值页面是不会渲染的

       需要 setData赋值

       this.setData({

            num: 1

        })

data赋值有三种方法

1. 直接setData对象赋值
2. 对于对象或数组字段，可以直接修改一个其下的子字段，这样做通常比修改整个对象或数组更好
3. 通过声明对象 和要修改的对象名一致，确保当前声明的对象和老数据保持一致，要重新get修改的对象，针对于复杂的数据处理

  let arr = this.data.arr;

    arr.map(item=>{

      item.num = 100

    })

    this.setData({

      num:0,

      'arr[0].num':2,

    'obj.text':'data 赋值',

      arr

})

Ajax

简单的封装一下和 vue的axios 类似

wx.request({

    url: requestHandler.url,

    data: requestHandler.data, (promise)

    method: requestHandler.method || "GET",

    header: HEASERS,

    success: function (res) {

      requestHandler.success(res.data)

    },

    fail: function (res) {

      requestHandler.fail(res.data)

    },

    complete: function () {

    }

  })

缓存API

缓存api 、storage 参数（object）

       同一个微信用户，同一个小程序 storage 上限为 10MB。

设置：wx.setStorage(OBJECT) 

获取：wx.getStorage(OBJECT) 

异步接口，存储的是JSON数据

1. 设置：wx. getStorageSync (OBJECT) 

获取：wx. getStorageSync (OBJECT) 

同步接口，存储的是JSON数据

1. 异步获取用户信息存储情况接口：wx. getStorageInfo (OBJECT) 

              同步获取用户信息存储情况接口：wx. getStorageInfoSync (OBJECT) 

返回是JSON数据

1. 删除缓存接口

              removeStorage(KEY)  ——>删除异步的缓存

              removeStorageSync (KEY)  ——>删除同步的缓存

              wx.clearStorage() ——> 异步清理本地缓存

              wx.clearStoragesync() ——> 同步清理本地缓存

              let info={id:100};

         wx.setStorage({

             key: 'info',

             data: info,

         })

        wx.getStorage({

             key: 'info',

             success: function(res) {

                 console.log(res.data.id)

             }

         })

将数据存储在本地缓存中指定的 key，会覆盖掉原来该 key 对应的内容

路由跳转

页面跳转方式

1. 通过标签跳转

<navigator path="/page/hemo/index?obj={id:100}" open-type="navigato" hover-class="other-navigator-hover">打开绑定的小程序</navigator>

1. 通过wx提供的接口方法
   1. navigateTo, redirectTo(request中跳转到其他页面) 只能打开非 tabBar 页面。
   2. switchTab 只能打开 tabBar 页面 （不可传惨）。
   3. reLaunch 可以打开任意页面。( 关闭所有页面，打开到应用内的某个页面 )

标签或接口方式跳转，传惨都是以 get形式传惨

       wx.navigateTo({

        url: '../goodslist/index?obj={id:100}',

        success: function(res) {},

         fail: function(res) {},

        complete: function(res) {},

    )}

    传参是需要注意：

1. 1. 1. 参数中不可以再次出现 “？”

    因为页面的跳转本身就是一种 get形式跳转传惨的，如果有就会默认在 第二个 “？”的位置结束，只保留第二个“？”之前的参数

1. 1. 1. 参数中不可以再次出现 “//”

    因为页面的跳转传惨会预编译是以‘\’为界的，如果有就会默认在 第二个 “\\”的位置结束，只保留第二个“\\”之前的参数

    switchTab

        1、用数据缓存 （Storage）

        2、用全局变量存储globalData

            用法：

                var app = getApp();

                app.globalData.type = 1;

                通过全局 app.js 中的 globalData：{ type:null}

               

接收参数

调用页面路由带的参数可以在目标页面的onLoad中获取

    onLoad: function(options) {

      let data = JSON.parse(options.obj)

    }

页面返回data赋值

  wx.navigateBack();

    // 往上一级页面传参

    var pages = getCurrentPages();

    var currPage = pages[pages.length - 1]; // 当前页面

    var prevPage = pages[pages.length - 2]; // 上一级页面

    currPage.setData({

        id: 1101

    });

返回后刷新页面

生命周期回调函数：

onLoad(Object query)：页面加载时触发。一个页面只会调用一次。

onShow()：页面显示/切入前台时触发。

onLoa() 在微信小程序中，实现返回上一页的时候其实是直接将隐藏的页面再显示出来，所以不存在页面的再次加载

onShow()里面。

后返回发票管理页面，通过onShow()刷新数据。

自定义微信好友分享

onShareAppMessage(Object) 目前只支持朋友之间分享

监听用户点击页面内转发按钮（<button> 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。

json

    {

        "component": true,

         "enablePullDownRefresh": false,  //禁止下拉刷新，上啦加载

        "navigationBarTitleText": "商品详情", //页面标题

        "usingComponents": {

            "i-button": "../../dist/button/index"

        }

}

wxss

wxss和html中用到的css几乎一样，不同之处是对背景图片

       在wxss中background: url() 支持（http, base64）

    不可以使用本地路径图片

    背景的大小也是不起作用的  background-size:2rem;

    边框的图片border-image: url() 也是不支持

解决办法：背景图片和大小、边框的图片可以写在 wxml 里面 标签中的style。

<view style='background:url(../../img/bt_1_03.png);  background-size:2rem;'></view>

<view style="border-image: url(../../img/bg.png) 2 2 2 2;">

注意：在使用模板或组件，在组件中如有使用本地图片是需要注意图片的路径，图片路径是按照使用组件页面位置查找相对的路径。

工具调试

1. 浏览调试

 

1. 真机调试

 

持续更新....