微信小程序简单了解

最新推荐文章于 2024-10-17 17:20:17 发布

sslcsq

最新推荐文章于 2024-10-17 17:20:17 发布

阅读量656

点赞数 1

文章标签：小程序

本文链接：https://blog.csdn.net/sslcsq/article/details/105704763

版权

一、小程序是什么
1.目前公司主流前端技术：H5,JS(ES5/6/7/8/9/),vue,小程序,Flutter,React 2.微信小程序是一种不需要下载安装即可使用的应用（腾讯） 3.微信小程序发布时间2017年1月9日 4.商业模式利于产品推广

二、小程序使用流程
1.注册微信小程序账号

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

帐号信息 -> 邮箱激活 -> 信息登记

AppID(小程序ID) 进入小程序后台找到开发选项复制出来

在小程序后台添加成员管理，方便协作开发
2.下载微信开发者工具并安装

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

3.打开微信开发者工具创建微信小程序

微信开发者工具集预览，开发，调度，上传于一体的工具
4.利用开发者工具进行小程序开发

小程序的优势：

快速的加载
2.更强大的能力
3.原生的体验（Native体验，即android,ios的App体验）
4.易用且安全的微信数据开放
5.高效和简单的开发
小程序开发和H5开发的区别？？？

H5:ECMA(ES5,Es6),DOM,BOM

1.有完整的的DOM API和BOM API。例如：getEleentById,window,location
2.网页开发渲染线程和脚本线程是互斥的
小程序：

1.缺少相关的DOM API和BOM API。例如：getEleentById,window,location
2.网页开发渲染线程和脚本线程是二者是分开的
5.小程序的开发目录结构：

utils:存放平时开发时常用的工具函数 app.js:小程序项目的逻辑入口相当于vue中的main.js app.json:是小程序的全局配置文件，会影响每个页面的配置 app.wxss:是小程序的全局样式,会影响每个页面的样式 project.config.json:项目的配置文件（一般不需要改动） sitemap.json:小程序的搜索蜘蛛（一般不需要） pages:平时开发页面的目录相当于vue中的src目录

通常一个小程序页面包括4种类型的文件：以index页面为例来说明

index.js:页面的JS逻辑相当于H5中的JS
index.json:指当前页面的配置文件（注意：只能使用app.json中window的各种配置）
index.wxml:指当前页面模板相当于H5中的html

小程序常用标签：
    view:相当于H5中的div
    image:插入图片，相当于H5中的img
    text:嵌入文本  相当于H5中的span
    block:逻辑包裹标签，最终不渲染到页面中 相当于vue中template标签

index.wxss:指页面的样式相当于H5中的css
6.如何给小程序添加底部的tabbar

app.json全局配置文档地址：

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar

参考tabBar部分的配置即可

操作步骤：

打开app.json，添加tabBar选项，配置代码如下：

{
…
“tabBar”:{
“custom”:true,//true,表示开启自定义tabbar
“color”:"#000", //未选中的文字颜色
“selectedColor”:"#d4237a", //选中的文字颜色
“list”:[
{“text”:“首页”, //tabbar显示文字
“pagePath”:“pages/index/index”, //页面路径
“iconPath”:"/images/home.png", //未选中的icon
“selectedIconPath”:"/images/home_active.png" //选中的icon
},
{“text”:“日志”,
“pagePath”:“pages/logs/logs”,
“iconPath”: “/images/my.png”,
“selectedIconPath”:"/images/my_active.png"}
]
}
…
}

注意：设置tabBar最多5项，最少2项

自定义的tabBar:

感兴趣参考https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
三、如何给小程序添加新页面
直接创建文件或者在app.json中通过pages选项直接添加路径，然后自动生成页面的4个文件

页面JS:

页面：Page({})
组件：Component({});
四、如何在手机端测试
用手机微信扫描微信开发者工具的预览二维码来显示
微信小程序常用指令：
1.遍历数组：wx:for 相当于vue中的v-for

注： index:代表遍历的索引，item:代表遍历每一项

如果不改变index和item的名子，则需要设置：

更改索引：wx:for-index=“idx”

更改每一项wx:for-item=“ite”

为了提高遍历性能，通常在遍历时加上wx:key,类似于vue中的key

2.条件渲染：

wx:if:条件true渲染标签，false不渲染，类似于vue中的v-if

hidden:条件true隐藏标签，false显示标签,类似于vue中的v-show
微信小程序事件处理
1.绑定事件

格式： bind+事件名=“方法名”

例如：删除

如何传参：通常利用自定义属性来传参

说明：H5通常data-自定义属性名来传参

事件补充：事件流：事件冒泡和事件捕获

JS原生阻止冒泡：e.stopPropaGation()

事件冒泡的方式：bind+事件名=“方法名”

阻止冒泡的方式:catch+事件名=“方法名”
2.触发逻辑操作

数据驱动操作如何同步到视图？？？？

this.setData({}); 类似于React中的this.setState({});

补充：只更新某一条数据，而不是整体覆盖更新

思路：通过指定下标解析一个字符串的方式来只更新某一条数据

 //let tempItem='users['+idx+'].name'
let tempItem=`users[${idx}].name`;

作业：实现一个todolist

参考网址：http://www.todolist.cn/

一、小程序的样式处理
回顾css适配单位:rem,vw,vh,%

小程序css适配单位：rpx 相当于css中的rem，

使用rpx很简单，不用计算，直接使用设计稿测量的px值，如下：

例如：某个按钮宽度是150px,高度50px,在小程序如果写样式

.btn {
width:150rpx;
height:50rpx;
}
小程序设计图参考的视觉标准：iphone6的750px

3.样式复用

格式：@import “复用的样式路径”;
4.支持内联样式：

5.动态改变class

例如：

具体小程序样式参考：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

二、小程序的生命周期
小程序的生命周期：

小程序应用的生命周期：App()

onLaunch：监听小程序初始化，只执行一次
onShow:监听小程序启动或切前台。
onHide:监听小程序切后台。

小程序中页面的生命周期：Page()

onLoad:页面加载,只加载一次,通常用于页面之间的传参或初始化数据

    类似于vue中的created


onReady:监听页面初次渲染完成，类似于vue中的mounted
onShow:进入当前页面触发
onHide:离开当前页面触发 
onUnload:类似于vue中的beforeDestroy

三、全局数据管理
可以利用app.js中自定义变量，然后在不同页面通过getApp()来获取到app.js实例

调用定义的变量，来实现全局与页面之间通讯

一、小程序的路由
1.回顾vue路由 vue-router

标签：

JS：this.$rourer.push(’/home’)

小程序路由有两种实现方式：

标签：

例如： {{ item.title }}

说明：open-type

指定跳转方式:与JS跳转方式一一对应

值	      说明
navigate	对应 wx.navigateTo
redirect	对应 wx.redirectTo 的功能	
switchTab	对应 wx.switchTab 的功能	
reLaunch	对应 wx.reLaunch 的功能	1.1.0
navigateBack	对应 wx.navigateBack 的功能

JS：

1.wx.navigateTo(url:‘path?参数名=值’)

特点：
(1)带历史回退功能,类似于vue中的this.$router.push()
(2)不能导航到tabBar页面

路由跳转如何传参：

例如：

传：
wx.navigateTo({
url: /pages/list/list?title=${title},
})

接：在接收的页面通过onLoad生命周期中的options来接收

2.wx.switchTab()

特点：只能打开tabBar页面

3.wx.reLaunch()

特点：

  1.即可以打开tabBar页面，也可以打开非tabBar页面
  2.不能回退，只能点击左个角的home，回到首页

4.wx.redirectTo()

类似于vue中的this.$router.replace('/home');

特点：

  1.只能打开非tabBar页面
  2.不能回退，只能点击左个角的home，回到首页

5.wx.navigateBack()进行历史回退类似于JS中的history.go(-1)
小程序内置组件
swiper scroll-view:可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，

scroll-x:控制横向滚动
scroll-y:控制纵向滚动
icon checkbox check-group

scroll-view picker switch

打开摄像头：

this.mycamare=wx.createCameraContext()

用

this.mycamare.startRecord(Object object) 开始录像
this.mycamare.stopRecord(Object object) 结束录像
this.mycamare.takePhoto(Object object) 拍摄照片

获取视频： wx.createVideoContext(‘视频id’)

配合
数据请求：
前后端分离：

前端：实现页面的UI和逻辑处理

后端：主要提交数据接口(url)

前端和后端对接：ajax

ajax实现：

JS:w3c标准：XMLHttpRequest/ ActiveXObject() IE
jQuery: $. a j a x (),$ .getJSON()…
Vue:axios,fetch
React:axios,fetch
微信小程序：wx.request()
2.微信小程序的数据请求：

语法：
wx.request(
url：‘https://xxxx.com’

)

1.注意：
url接口地址协议必须是https

  接口数据从哪来：

    1.线上公司给的接口
    2.找的免费接口（公司接口，只不过是公司开放出来的）

    3.json文件:将文件上传到线上静态服务器

     例如：上传码云上，生成静态服务器，打开json数据


    4.mock数据（在线mock数据接口地址）


    5.原则上是不允许本地访问接口，可以在本地服务器启环境来访问json文件

      在本地安装一个node服务器，直接启动环境：

        例如： npm install http-server -g

        运行：hs -p 端口号  -o 

        例如： hs -p 9999 -o

        p:指定端口号
        o:表示自动打开浏览器

2.注意：如果访问线上真实接口有主要有两种方法：

1.在小程序后台开发-开发设置–服务器域名–request域名配置要访问的域名

2.通过微信开发者–顶部“详情”按钮–项目设置–勾选不检验合法域名
3.网络请求会有延迟，通常在请求过程中加入loading,以提升用户体验

显示loading:wx.showLoading()
隐藏loading:wx.hideLoading()

参考文档：https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showLoading.html
mock数据（在线mock数据接口地址）
公司开发项目时，都是前，后端同时开发

mock数据：模拟数据（俗称造假数据）

(1) 模拟数据：

前提：
1.前端和后端沟通好数据结构（也称对接口）
2.接口文档：通常接口文档查阅要传递的url,传递的参数，提交方式，返回数据结构

(2)mockjs

官方文档：https://github.com/nuysoft/Mock/wiki
官方示例:http://mockjs.com/examples.html

Mock.mock(生成的json数据)

// 属性名 name
// 生成规则 rule
// 属性值 value
‘name|rule’: value

常用占位符：

 . @id:生成随机id
 . @cname:生成随机的中文姓名
 . @increment：递增
 . "属性|min-max":数值
 .@image('图片尺寸','图片颜色','图片文本')
 .@datetime('yyyy-MM-dd hh:mm:ss')
 .@county(true) 生成省市县
 .@url 生成网址
 .@email:生成邮箱
 .@cparagraph() 生成中文段落
 ......

例如： Mock.mock({ “status”:0, “err_msg”:“ok”, “result|10”:[

{id:"@id",
 title:'@ctitle',
 cid:"@increment",
 "price|1000-2000":1,
 "old_price|2000-3000":1,
 "pic":"@image('200x100', '#0000FF', 'image')",
 "s_pic":"@image('150x70','#ff0000','s_pic')",
 "pub_date":"@datetime('yyyy-MM-dd')",
 "address":"@county(true)",
 "url":"@url",
  "email":"@email",
  "desc":"@cparagraph(5)"
}

]
})

（3）mock.js如何与微信小程序集成

通过wxmock来实现mock.js与小程序的集成

wxmock官方github: https://github.com/webx32/WxMock

步骤：

第一步：复制mock.js和wxmock.js文件到utils目录下

第二步：在app.js 引入 WxMock 代码

var Mock = require("./utils/WxMock.js");
第三步：在app.js中书写需要模拟的接口及返回结构

Mock.mock(‘自定义的接口地址’,模拟的数据)

例如：

let dataObj = {
  "status": 0,
  "err_msg": "ok",
  "result|10": [

    {
      id: function () {
        return Mock.Random.id();
      },
      title: function () {
        return Mock.Random.ctitle();
      },
      cid: function () {
        return Mock.Random.increment();
      },
      "price|1000-2000": 1,
      "old_price|2000-3000": 1,
      "pic": function () {
        return Mock.Random.image('200x100', '#0000FF', 'image');
      },
      "s_pic": function () {

        return Mock.Random.image('150x70', '#ff0000', 's_pic')
      },
      "pub_date": function () {
        return Mock.Random.datetime('yyyy-MM-dd')
      },
      "address": function () {

        return Mock.Random.county(true)

      },
      "url": function () {

        return Mock.Random.url();
      },
      "email": function () {
        return Mock.Random.email()
      },
      "desc": function () {
        return Mock.Random.cparagraph()
      }
    }

  ]

}


let url = 'https://www.1906A.com/api/goodslist'


/**
* Mock.mock（）说明
* url：代表要请求的数据接口
* dataObj:代表请求的模拟数据
*/
Mock.mock(url, dataObj)

第四步：在需要请求的页面中调用 wx.request 中使用url为 mock对应的地址就会返回响应mock数据
例如：

//测试mock数据请求
getMockData() {
console.log(11111)
wx.request({
url: ‘https://www.1906A.com/api/goodslist’,
header: {
‘content-type’: ‘application/json’
},
success: (res) => {
console.log(‘mock返回的数据’, res);

    this.setData({
      resultArr: res.result
    });
  }
})

easy-mock:可利用mock.js生成线上的接口

easy-mock官网：https://www.easy-mock.com/login

自定义组件
自定义组件的优势：复用，好维护

小程序复用代码方式：

1.自定义模板复用

第一步：定义模板

 格式：

<template name="模板名称">
    ....  //定义模板结构
</template>

例如：

<template name="list_tpl">
  <view>
    <text>list模板页11111</text>
  </view>
</template>


第二步：使用模板

<import src="引入定义好的模板路径" />

<template is="调用定义好的模板名称" data="传递给模板的数据" />

例如：

<import src="/public/template/list/list" />

  <template is="list_tpl" data="{{ ...listData,...testData }}" />

  其中：listData和testData都是对象

注意：模板样式必须要使用的页面样式文件单独引入！！！！

例如：@import “…/…/public/template/list/list.wxss”

适用场景：需要最终渲染模板，不需要带业务逻辑的场景

2.自定义组件复用

(1)封装组件三要素：事件,slot,props

（2）组件构成：html,css,JS

（3）组件的创建和使用

  > 创建组件:右键--创建component

  组件的结构与页面的文件类型一样：js,wxml,wxss,json

  JS文件中用
     Component({ })


  > 使用组件

   在使用的页面中找到对应的页面json文件，例如：index.json

   添加其中添加：

      {
        "usingComponents": {
          "组件在页面上要使用的名称":"组件的路径"
        }
      }

      例如：

      {
        "usingComponents": {
          "Dialog":"/public/components/dialog/dialog"
        },
        "navigationBarTitleText": "电商首页"
      }

组件之间通讯
父传子

子传父

通过获取组件引用来传递数据或触发方法

第三方组件（weui,有赞）