微信小程序

时间 2019-12-01

标签微信程序繁體版

原文原文链接

什么是微信小程序

首先他不是h5页面,他更像是个app，可是原声hybird模式都会占用咱们的手机空间，能够直接放到微信里运行，跨平台，支持离线缓存，但开发体验很好，缺点，不适合作逻辑复杂的，页面多的等等。相似于vue单页开发css

具体请查看微信公众平台html

万事开头难

申请AppId 具体参见微信公众平台
下载小程序，
建立项目

编辑区 - 模拟界面
目录结构区
调试 - source,storage,...

搭建结构

app配置文件vue

app.json 全局配置文件，能够配置小程序入口，标题，tabbar配置导航，每一个子文件夹下的json至关于app.jsonde window项，不设置，默认为app.json内容，设置的话可覆盖
app.wxss css样式文件引入css, @import ,flex布局@import "list-tmpl/list-tmpl.wxss";
app.js 引入 js require var list = require('../../data/data.js');
wxml 引入<import src='list-tmpl/list-tmpl.wxml' />
images文件夹
data文件夹

路径一概相对路径json

单位 rpx小程序

1rpx在iopone6下 == 2px微信小程序

宽度 750饶平县= 100%缓存

高度通常采用rpxbash

线条1px微信

事件app

bindtab冒泡
catchtab非冒泡
bindchange
bindinput

跳转三种方式

navigateTo跳转到，有返回键
switchTab 若是有tabbar只能用switchTab方法切换
redirectTo 重定向没有返回键
navigateBack

组件

swiper组件一般结合下拉刷新须要配置window <swiper autoplay="{{true}}" interval='2000' indicator-dots='{{true}}' circular='{{true}}' vertical='{{true}}' style='height:400rpx'> <swiper-item wx:for="{{imgs}}" wx:for-item="num">
<picker mode="time" start="10:00" end="18:00" bindchange="timerEvent">
<picker mode="date" start="2015-04-11" end="2017-08-05" value=" {{time}}" bindchange="dateEvent">
<picker range="{{array}}" value="{{time}}" bindchange="selector">
<picker-view style="width:100%;height:300px" indicator-style="height:50px" bindchange="picks"> <picker-view-column style="line-height:50px"> <view wx:for="{{foods}}">{{item}}</view> </picker-view-column>
<progress percent="20" active show-info></progress>
<switch type="switch" checked="{{true}}" />
<view wx:for="{{arrs}}"> <icon type="{{item}}" size="30"></icon>{{item}} </view>arrs有不少种类型

播放音乐

wx.playBackgroundAudio({
      dataUrl: 'http://isure.stream.qqmusic.qq.com/C4000032ZOkm0LBgHW.m4a?vkey=88FEC5880C346CE5D6F0C5E6A3DAA71ED4EB67057F6B17250168EE7E9BC7D6D0928632F365D3582E587273A0B2305466C54B963BC4D54298&guid=8491420912&uin=0&fromtag=66',
      success: (res) =>{
        app.flag = false;
        this.setData({
          flag:false
        })
      }
});

onLoad: function (options) {
    //防止用户使用自带播放，致使图片显示不一样步
    wx.onBackgroundAudioPlay(()=>{
      app.flag = false;
      this.setData({
        flag: false
      })
    })
    wx.onBackgroundAudioPause(() => {
      app.flag = true;
      this.setData({
        flag: true
      })
    })
  },
  
  //flag要设置全局的
  //数据公用
  //var app = getApp();能够获取app里面的数据
复制代码

模版使用

声明：<template name="list">
引入： <template is="list" data="{{...item}}" ></template>
复制代码

还有不少组件和APi能够照这文档开发就能够啦