小程序总结

作者: 强某某 | 来源:发表于2020-03-09 17:56 被阅读0次

走进小程序

微信⼩程序的注册流程
- 去微信公众平台注册⼩程序账号
- 获得appid和appsecret
微信开发者⼯具安装及使⽤讲解
- 出现合法域名校验错误
  
  1.png

解决：详情⾥勾上“不校验安全域名、web-view 域名、TLS 版本以及 HTTPS 证书”

⼩程序⽬录结构分析
⼩程序的主体部分：

app.js （⼩程序主要逻辑层，⽤来注册⼩程序）
app.json（⼩程序公共配置）
app.wxss（⼩程序公共样式）

app.json(全局的配置)
{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "哈哈",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

index.json(单个页面的配置文件，会覆盖全局的)
{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#000000",
  "navigationBarTextStyle": "white"
}
同理：index.wxss也会覆盖app.wxss

第一个小程序

新建⼀个⼩程序及框架组成介绍
- 新建⻚⾯的步骤
  - 右键新建page⽣成⻚⾯的框架
  - 在app.json中的pages添加我们新建⻚⾯的路径
⼩程序⽣命周期和⻚⾯⽣命周期讲解

⼩程序⽣命周期：
- onlauch(当小程序初始化完成时，会触发 onLaunch（全局只触发一次）)
- onshow(显示或者切换到前台)
- onhide(切换到后台)

⼩程序启动时先执行小程序整体生命周期的onlauch>onshow,然后在执行⻚⾯的生命周期onload>onshow>onready

⻚⾯⽣命周期
- onload
- onshow
- onready
- onhide
- onunload

  /**
   * 生命周期函数--监听页面加载(只第一次)
   */
  onLoad: function(options) {
  },

  /**
   * 生命周期函数--监听页面初次渲染完成(只第一次)
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载(代码关闭页面)
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }

⼩程序⾃适应尺⼨单位rpx
rpx单位：是可以根据屏幕宽度进⾏⾃适应

2.png

一般使用iphone6设计稿因为好换算 1px=2rpx

flex弹性布局

在⽗容器上加上display:flex，将我们⽗容器编程弹性容器

.sort_box {
    display: flex;
    flex-direction: row;//⽔平排列
    margin: 0 30rpx;
    justify-content: space-around;//每个项⽬的两端间隔相等
}

flex布局博客：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

数据绑定与事件交互

数据绑定的概念
- Mustache 语法（双⼤括号）
{{textstr+2}}
- 单向数据绑定
动态数据绑定
- ⼩程序data赋值
this.setData(对象)
- 获取data⾥的值
> this.data.(key值)

条件渲染

wx:if为true就显示元素，false不显示
语法

<view wx:if="{{score<60}}">不及格</view>
<view wx:elif="{{score>=80}}">优秀</view>
<view wx:else>良好</view>

列表渲染

wx:for绑定数组，wx:for-item值为当前项⽬的变量名，wx:for-index值为当前下标的变量名

<block wx:for="{{list}}" wx:for-item="course" wx:for-index="idx">
<view class="item">
<view class="item_img">
<image src="{{course.img}}"></image>
</view>
<view class="item_name">{{course.name}}</view>
<view>{{idx}}</view>
</view>
</block>

列表渲染文档： https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html#wx:key

一般直接把循环放到view上即可，如果需要两个view(甚至多个view)没有父级view，则可以通过block包裹；block最终不会在在界面显示，只是一个逻辑载体

绑定事件与事件交互

bind+事件

<button bindtouchstart="changeData" bindtouchend="tmove"bindlongpress="lpress">改变数据</button>

需要在js⾥写对应的⽅法

//点击事件
changeData:function(){
this.setData({
textStr:"hello ⼩程序"
})
},
//触摸移动
tmove:function(){
console.log("touchend");
},
//⻓按触发
lpress:function(){
console.log("longpress")
},

官方事件文档：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

事件机制--catch与bind
- bind会应⽤到冒泡机制，catch会阻⽌事件冒泡
```
<view class="box" bindtap="containerTap">
    <text catchtap="txtTap">⼩程序</text>
</view>
```
- 捕获阶段的bind与catch,绑定事件需要加上冒号
```
capture-bind:tap(绑定事件)
capture-catch:tap(绑定事件)
```
- 官方事件文档：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

3.png

事件捕获是从上到下捕获，然后才会向上冒泡，所以都是捕获事件从上到下执行，然后冒泡事件从下到上。

阻止冒泡：例如点击⼩程序三个字，则如果使用catchtap绑定txtTap则事件不会向上冒泡，也就是说bindtap="containerTap"
不会响应，但是如果bindtap="txtTap"则会冒泡的。

事件捕获：也分为bind和catch；如果是capture-bind:tap的事件会向下传递，下级也会捕获；
如果capture-catch:tap则不会把事件向下传递，下级不会捕获；所以catch也会在这里阻塞下级捕获；

案例

<!--pages/index/index.wxml-->
<view class="sort">
  <block wx:for="{{arrTitles}}" wx:for-item="item">
    <view class="item">
      <view class="radio">{{item.icon}}</view>
      <text>{{item.title}}</text>
    </view>
  </block>
</view >
<view wx:if="{{num>70}}">
优秀
</view>
<view wx:elif="{{num>60}}">
及格
</view>
<view wx:else>
不及格
</view>
<!-- 通过这种方式传递数据到事件里面data-* -->
<button data-num="90" bindtap="tapFlag">优秀</button>
<button data-num="65" bindtap="tapFlag">及格</button>
<button data-num="20" bindtap="tapFlag">不及格</button>

// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    arrTitles: [],
    num:90
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    let a = [{
      icon: "前",
      title: "前端"
    }, {
      icon: "后",
      title: "后端"
    }, {
      icon: "运",
      title: "运维"
    }, {
      icon: "测",
      title: "测试"
    }];
    this.setData({
      arrTitles: a
    })
  },
  tapFlag: function (event){
      //通过event.target.dataset.num获取传参
    this.setData({
      num: event.target.dataset.num
    })
  }
})

/* pages/index/index.wxss */

.sort {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.sort .item .radio {
  border-radius: 50%;
  color: white;
  height: 80rpx;
  width: 80rpx;
  line-height: 80rpx;
  background-color: blue;
  margin-bottom: 30rpx;
}

.sort .item {
  text-align: center;
}

⼩程序基础组件

基础组件

icon

<icon type="warn" size="100rpx" color="red"></icon>

progress

<progress percent="30" show-info="true" border-radius="10" strokewidth="50rpx" activeColor="red" backgroundColor="#000" active="true">
</progress>

rich-text(可以插入html字符串，但是不能绑定数据{{}})

<rich-text nodes="{{textStr}}"></rich-text>

text

<text selectable="true">⼩程序</text>

官⽅⽂档：https://developers.weixin.qq.com/miniprogram/dev/component/text.html

⼩程序常⽤表单组件

常用表单组件
- button
- checkbox
- form
- input(手动实现双向数据绑定)
- label
- radio
- textarea

// pages/index/index.js
Page({

/**
 * 页面的初始数据
 */
data: {
  str:'传递',
  textStr:"<div>哈哈{{str}}</div>"
},

/**
 * 生命周期函数--监听页面加载
 */
onLoad: function(options) {
 
},
inputFN:function(e){
  //实现双向数据绑定
  this.setData({
    str:e.detail.value
  })
}
})

<!--pages/index/index.wxml-->
<input bindinput="inputFN">请输入</input>
<text>{{str}}</text>
<rich-text nodes="{{textStr}}"></rich-text>

表单组件: https://developers.weixin.qq.com/miniprogram/dev/component/button.html

其他组件

picker组件

<picker bindchange="bindPickerChange" value="{{index}}" range="
{{array}}">
 <view class="picker">
 当前选择：{{array[index]}}
 </view>
</picker>

slider组件

<slider min="50" max="200" show-value="true" step="5"></slider>

switch组件

<switch bindchange="bindSwitchChange" checked="true"></switch>

⼩程序媒体组件

audio组件

<audio id="myAudio" poster="{{poster}}" name="{{name}}" author="
{{author}}" src="{{src}}" controls></audio>
<button bindtap="audipplay">播放</button>
<button bindtap="audippause">暂停</button>
<button bindtap="audioseek">设置进度条</button>

video组件

<video src="https://www.w3school.com.cn/i/movie.ogg" controls></video>

image组件

<image lazy-load="true" src="../../images/sp2.png"></image>

⼩程序地图组件map
map⽂档: https://developers.weixin.qq.com/miniprogram/dev/component/
⼩程序画布组件canvas
canvas⽂档: https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

<canvas style="width:600rpx;height:400rpx;" canvas-id="canvas"></canvas>

onReady: function() {
console.log("ready");
var context = wx.createCanvasContext('canvas');
context.setStrokeStyle("#ff0000");
context.setLineWidth(2);
context.moveTo(160,100);
context.arc(100,100,60,0,2*Math.PI,true);
context.moveTo(140,100);
context.arc(100,100,40,0,Math.PI,false);
context.moveTo(85,80);
context.arc(80,80,5,0,2*Math.PI,true);
context.moveTo(125,80);
context.arc(120, 80, 5, 0, 2 * Math.PI, true);
context.stroke();
context.draw();
}

常⽤视图容器及路由跳转

视图容器swiper实现轮播图

<swiper class="swiper" autoplay="true" interval="3000" duration="1000"
indicator-dots="true" indicator-active-color="#007aff" vertical="true"
circular="true" display-multiple-items="2">
 <block wx:for="{{imgs}}">
 <swiper-item>
 <image src="{{item}}" class="item_img"></image>
 </swiper-item>
 </block>
</swiper>

swiper⽂档: https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

可滚动视图区域scroll-view

横向滚动

<scroll-view scroll-x="true" style="display:flex;white-space:nowrap;">
 <block wx:for="{{imgs}}">
 <image src="{{item}}"></image>
 </block>
</scroll-view>

纵向滚动

<scroll-view scroll-y="true" scroll-top="100" style="height:340rpx;"
scroll-into-view="{{toView}}" bindscrolltoupper="upper"
bindscrolltolower="lower">
 <block wx:for="{{imgs}}">
 <image src="{{item}}" id="{{'img'+index}}"></image>
 </block>
</scroll-view>
<button bindtap="gotoview">定位到第三张</button>

scroll-view实现可滚动导航栏

<scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}">
 <block wx:for="{{navData}}" wx:key="index">
 <view class="nav_item {{currentNav == index?'active':''}}" data-current="
{{index}}" bindtap="switchNav">{{item.text}}</view>
 </block>
</scroll-view>

点击移动scroll-view，添加active类

switchNav:function(e){
 // console.log(e);
 var cur = e.currentTarget.dataset.current;
 //tab选项居中
 var singleWidth = this.data.windowWidth/5;
 this.setData({
 navScrollLeft: (cur - 2)*singleWidth
  });
 console.log(this.data.navScrollLeft);
 if(this.data.currentNav == cur) {
 return false;
 }else{
 this.setData({
 currentNav: cur
 })
 }
 },

特殊覆盖组件cover-view及cover-image

<video src="https://www.w3school.com.cn/i/movie.ogg" controls>
<cover-view class="shuiyin">
⼩D课堂
<cover-image src="../../images/sp2.png"></cover-image>
</cover-view>
</video>

cover-view文字遮盖层cover-image图片遮盖层

⻚⾯导航组件

<!-- 方式一 -->
<navigator url="/pages/personal/personal">跳转到个⼈⻚⾯</navigator>

//方式二
 wx.navigateTo({
      url: '/pages/user/user?name=zq',
      success:function(){
        //回调成功函数
        console.log(111)
      }
    })

导航组件文档: https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

路由跳转⽅法

wx.navigateTo()保留当前⻚⾯，跳转到应⽤内的某个⻚⾯。但是不能跳到 tabbar (底部切换栏)⻚⾯
wx.switchTap()跳转到 tabBar ⻚⾯，并关闭其他所有⾮ tabBar ⻚⾯
wx.reLaunch()关闭所有⻚⾯，打开到应⽤内的某个⻚⾯
wx.redirectTo()关闭当前⻚⾯，跳转到应⽤内的某个⻚⾯。但是不允许跳转到 tabbar ⻚⾯
wx.navigateBack()关闭当前⻚⾯，返回上⼀⻚⾯或多级⻚⾯
路由跳转⽂档:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html

⻚⾯的传参与取参

<navigator url="/pages/sort/sort?id=1&name=eric">跳转到分类</navigator>

//下个页面获取参数
onLoad: function (options) {
  console.log(options.name)
  console.log(options.id)
}

⼩程序的底部导航栏

方式一：通过配置方式

app.json
"tabBar": {
 "color": "#2b333b",
 "selectedColor": "#3bb149",
 "borderStyle": "black",
 "list": [{
 "pagePath": "pages/index/index",
 "text": "⾸⻚"
 },{
 "pagePath": "pages/sort/sort",
 "text": "分类"
 },{
 "pagePath": "pages/personal/personal",
 "text": "个⼈"
 }]
 },

方式二：代码设置

//动态设置 tabBar 某一项的内容，2.7.0 起图片支持临时文件和网络文件
wx.setTabBarItem({
  index: 0,
  text: 'text',
  iconPath: '/path/to/iconPath',
  selectedIconPath: '/path/to/selectedIconPath'
})

tabbar文档：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/tabbar.html

setTabBarItem文档：https://developers.weixin.qq.com/miniprogram/dev/api/ui/tab-bar/wx.setTabBarItem.html

构建模板化与模块化⼩程序

利⽤require⽅法加载js模块⽂件

require路径要写成相对路径

var util = require('../../utils/util.js');

WXML模板编写与引⼊

新建模板⽂件，wxml和wxss

<template name="courseList">
<view class="item">
<view class="item_img">
<image src="{{course.img}}"></image>
</view>
<view class="item_name">{{course.name}}</view>
<view>{{idx}}</view>
</view>
</template>

在需要⽤的⻚⾯import模板⽂件

<view class="list">
<block wx:for="{{list}}" wx:for-item="course" wx:for-index="idx">
<template is="courseList" data="{{course}}"></template>
</block>
</view>

wxs模块引⽤

使用

<wxs src="../../wxs/common.wxs" module="info"></wxs>
<view>{{info.message}}</view>
<view>{{info.add(20,10)}}</view>

wxs⽂件

//JS代码
var msg = "hello world";
//commonjs模块化导出
var num = function (num1, num2) {
 return num1 + num2;
}
module.exports = {
 message: msg,
 add: num
}

wxs案例

价格保留⼩数

var toFixed = function(value,count){
 return value.toFixed(count);
}

时间戳格式化

var formatNumber = function (n) {
 n = n.toString()
 return n[1] ? n : '0' + n
}
var regYear = getRegExp("(y+)", "i");
var dateFormat = function (timestamp, format) {
 if (!format) {
 format = "yyyy-MM-dd hh:mm:ss";
 }
 timestamp = parseInt(timestamp);
 var realDate = getDate(timestamp);
 function timeFormat(num) {
 return num < 10 ? '0' + num : num;
 }
 var date = [
 ["M+", timeFormat(realDate.getMonth() + 1)],
 ["d+", timeFormat(realDate.getDate())],
 ["h+", timeFormat(realDate.getHours())],
 ["m+", timeFormat(realDate.getMinutes())],
 ["s+", timeFormat(realDate.getSeconds())],
 ["q+", Math.floor((realDate.getMonth() + 3) / 3)],
 ["S+", realDate.getMilliseconds()],
 ];
 var reg1 = regYear.exec(format);
 // console.log(reg1[0]);
 if (reg1) {
 format = format.replace(reg1[1], (realDate.getFullYear() +
'').substring(4 - reg1[1].length));
 }
 for (var i = 0; i < date.length; i++) {
 var k = date[i][0];
 var v = date[i][1];
 var reg2 = getRegExp("(" + k + ")").exec(format);
 if (reg2) {
 format = format.replace(reg2[1], reg2[1].length == 1
 ? v : ("00" + v).substring(("" + v).length));
 }
 }
 return format;
}

小程序总结

走进小程序

第一个小程序

数据绑定与事件交互

⼩程序基础组件

常⽤视图容器及路由跳转

构建模板化与模块化⼩程序

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读