微信小程序

小程序

一种无需下载即搜即用的全功能App

目前常见的小程序：微信小程序，支付宝小程序等

微信小程序介绍

在2017年1月9日宣布的微信小程序正式上线

官网介绍：https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN

优点

• 和传统APP

  • 对于用户来说即用即走，不需要下载
  • 基于广大的微信用户基础上，可以做到迅速普及
  • 开发成本低，传统App需要至少安卓和ios两名开发人员

• 和H5

  • 快，主要的样式代码都封装在微信小程序里面，所以打开速度比普通的H5要快，接近原生APP
  • 可以调用比H5更多的手机系统功能来进行开发，例如GPS定位、录音、拍视频、重力感应等，能开发更丰富的使用场景
  • 开放的入口比较多，除了通过扫码，发送朋友，搜索，附近等常用入口外，还能与公众号关联，群发文章嵌入，公众号菜单链接等

缺点

• 和传统APP

  • 微信小程序只有2M的大小，这样导致无法开发大型一些的小程序
  • 小程序的技术框架还不稳定，开发方法时常有修改，导致短时间内经常要升级维护

• 和H5

  • 需要像APP一样审核上架，这点比HTML5即做即发布要麻烦些
  • 语法和传统H5有区别，需要时间熟悉了解（后续一些框架可以解决部分问题）

开发准备

注册

地址：https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN

获取AppId

登录 小程序后台 ，我们可以在菜单 “开发”-“开发设置” 看到小程序的 AppID 了 。

开发工具

微信开发工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

开发工具介绍：https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

开发

新建项目

项目目录

├─pages                 小程序对应的页面
│  ├─index              首页
│  │      index.js      首页下的js
│  │      index.json    配置
│  │      index.wxml    标签结构类似html
│  │      index.wxss    样式文件类似css
│  │      
│  └─logs              子页面
│          logs.js
│          logs.json
│          logs.wxml
│          logs.wxss
│          
└─utils                自己封装的工具函数
        util.js    
│  app.js             全局js
│  app.json           全局配置
│  app.wxss           全局样式
│  project.config.json
│  sitemap.json

配置介绍

官网：https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html

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

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

全局配置app.json

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

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

字段的含义

• pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
• window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

完整的配置信息请参考 app.json配置

page.json

官网：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

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

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

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

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000 #ffc0cb
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新。 详见 Page.onPullDownRefresh
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px。 详见 Page.onReachBottom
disableScroll Boolean	false	设置为 true	则页面整体不能上下滚动；只在页面配置中有效，无法在 app.json 中设置该项

视图层

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

基础组件：https://developers.weixin.qq.com/miniprogram/dev/component/ 事件系统：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

数据绑定

普通写法

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

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

组件属性

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

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

绑定事件

<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>

tapName: function(event) {
  console.log('点我干嘛')
}

类型	触发条件
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开

样式层WXSS

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

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

尺寸单位

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

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6Plus	1rpx = 0.552px	1px = 1.81rpx

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

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

基本组件

view

类似 div

属性名	类型	默认值	说明
hover-class	String	none	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果

<view hover-class="h-class">
点击我试试
</view>

<!-- wxss -->
.h-class{
  background-color: yellow;
}

text

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

属性名	类型	默认值	说明
selectable	Boolean	false	文本是否可选
decode	Boolean	false	是否解码

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

案例代码(吃什么)

index

<view bindtap="goDemo">吃什么</view>

  goDemo(){
    console.log(23)
    wx.navigateTo({
      url: '../demo/demo'
    })
  },

demo

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#ffc0cb",
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "吃什么",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

<!--pages/demo/demo.wxml-->
<view>
  <view class="food-name">{{foodName}}</view>
  <view bindtap="start" class="button">{{buttonText?'结束':'开始'}}</view>
</view>

/* pages/demo/demo.wxss */

.food-name{
  text-align-last: center;
  font-size: 40rpx;
  margin:150rpx auto;
}

.button{
  height: 300rpx;
  width: 300rpx;
  font-size: 40rpx;
  line-height: 300rpx;
  border-radius: 50%;
  background-color: #ffc0cb;
  text-align: center;
  margin: 0 auto;
  color:#fff;
}

// pages/demo/demo.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    foodName: "点击下方按钮开始",
    foods: ['黄焖鸡', '牛肉拉面', '火锅', '抢同事的', '盖饭', '米线', '汉堡王'],
    buttonText: false,
    timeOut: ''
  },
  start(e) {
    this.startInter()
    if (!this.data.buttonText) {
      let id = setInterval(() => {
        this.startInter()
      }, 200);
      this.setData({
        timeOut: id
      })
    } else {
      this.endInter()
    }
    this.setData({
      buttonText: !this.data.buttonText
    })
  },
  startInter() {
    let random = parseInt(Math.random() * this.data.foods.length)
    let text = this.data.foods[random]
    console.log(text)
    this.setData({
      foodName: text
    })
  },
  endInter(){
    clearInterval(this.data.timeOut)
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    this.endInter()
  }
})