微信小程序开发

微信小程序开发介绍和准备

小程序的诞生

微信浏览网页有时候会卡,甚至白屏,其实就是为了让用户体验更好,也更好管理.他有自己的一套开发框架.

什么是小程序

小程序是一种不需要下载就可以使用的应用,用户扫一扫,搜一搜就可以使用,应用无需安装卸载,却在手机上无处不在.又可以用完就走.并且体验也很好.

小程序和移动应用程序区别

小程序:无需安装,不占内存,易传播.

小程序能做什么

小程序可以实现一个应用程序的能力.已经有自己的生态,各行各业都已渗透进去

搭建一个微信小程序

小程序开发搭建准备:

1.注册小程序账号,微信开发者工具进行开注册小程序账号链接
2.激活所绑定的邮箱
3.信息登记
4.登录小程序管理后台
5.完善小程序信息
6.绑定开发者
7.下载微信开发者工具.微信开发者工具官网下载链接

微信小程序开发框架

创建项目

下载微信开发者工具之后,用微信扫描登录,创建项目
在这里插入图片描述

项目目录结构介绍:

在这里插入图片描述
app.js:主要是注册微信小程序应用
app.json:微信小程序全局配置,网络超时时间设置,各个页面注册路径
app.wxss:设置微信小程序全局样式
project.config.json:保存微信开发者工具的配置信息,比如程序员根据各自喜好配置的一些,界面颜色,编译配置等等
pages:存放微信小程序所有的页面,小程序页面一般由四个文件组成,分别是.js文件,.json文件,.wxss文件,.wxml文件

  • js:文件负责页面的一些逻辑和数据交互
  • json:微信小程序页面的一些配置
  • wxss:页面元素的样式
  • wxml:页面展示的元素和内容

utils:存放一些工具类函数,达到代码复用的目的

小程序两个配置文件的区别

在这里插入图片描述
pages:注册微信小程序所有页面
tabBar:如果页面是多tab,可以配置tab栏的表现
networktimeout:设置超时时间
debug:开启debug模式,可以在控制台打印一些调试信息或者日志
navigationStyle:
enablePullDownRefresh:设置全局或单页面的下拉刷新
disableScroll:设置是否开启滚动
两个文件的配置如果重复,则页面配置会覆盖掉全局配置.

微信小程序版本

总共有5个版本,分别是预览版本->开发版本->体验版本->审核版本->线上版本
sensor:可以修改地理位置
appdata:数据展示

微信小程序界面的组成成分

小程序一个页面由//index.js(放周期函数等逻辑处理的代码和数据交互代码),index.json(配置),index.wxml(界面元素),index.wxss(界面样式)
然后在app.json里面配置一下路由.配置如下:

{
  "pages": [
    "pages/index/index"
  ]
}

在这里插入图片描述
wxs是对wxml增强的一种脚本语言

wxml(WeiXin Markup Language)之语法:

wxml是框架设计的一套标签语言,结合组件wxs和事件系统,可以构建出页面的结构.
语法:<标签名 属性1=“属性1” 属性2=“属性2”></标签名>
严格闭合,大小写敏感

  • 数据绑定,
    mustache的方法绑定的,{{message}},和vue差不多.
    date-name={{theName}}
    hidden="{{hidden}}"
    如下图:`
    在这里插入图片描述
    小程序标签组件共同属性:
    在这里插入图片描述
  • 列表渲染
    页面渲染的时候用block,这个不算是一个标签,在渲染的时候不会被渲染出来,当然也就不会有样式class.
    <block wx:for="{{items}}" wx:for-item="item" wx:key="{{index}}"> <view>{{item.name}}</view> </block>在这里插入图片描述
  • 条件渲染
    wx:if
    wx:elif
    wx:else
    在这里插入图片描述
  • 模板引用
    templet的name来声明
    is属性来引用,data是模板数据
模板引用的两种方式:

1.import
//index.wxml 只会引用a里面的模板内容

<import src="a.wxml"/>
<template is="a"></template>

//a.wxml

<template name="a">
<view>shhsh</view>
</template>

当引用关系是index.wxml引用a.wxml,a.wxml引用b.wxml,则:index.wxml在引用a的时候b不会被引用.
2.include 引用a里面除模板外的所有内容

<include src="a.wxml"/>
<template is="a"></template>

在这里插入图片描述

//wxml
<template name="firstTemplet">
  <view>姓名:{{name}}</view>
  <view>性别:{{sex}}</view>
</template>
<template is="firstTemplet" data="{{...templetName}}"></template>
//js
templetName:{name:"shawn",sex:"man"},

在这里插入图片描述

wxss(WeiXin Style Sheets)

wxss是一套样式语言,用于描述wxml的组件样式
wxss的改变:
在这里插入图片描述
如图所示:
1.单位变成rpx
2.样式导入

外联样式

@import导入,这点和vue是雷同的
在这里插入图片描述

内联样式

在这里插入图片描述
3.选择器
在这里插入图片描述
选择器的优先级
在这里插入图片描述

微信小程序开发之JavaScript

nodeJs中的JavaScript
在这里插入图片描述
在这里插入图片描述
由上面两幅图可以看出,小程序开发是无法使用js原生库以及npm等
在这里插入图片描述
BOM:处理浏览器窗口和框架,主要是描述和浏览器的一些交互和方法

wxs

wxs可以根据标签来声明,也可以用一个文件来声明.
需要注意的是,在同一个文件中不要重复声明wxs,因为后面声明的wxs标签会覆盖前面的声明.
在这里插入图片描述
module.export将变量暴露给外部.

wxs的数据类型
在这里插入图片描述
在这里插入图片描述

MINA框架讲解

小程序的开发框架成为mina框架
在这里插入图片描述

小程序运行机制:
启动:

1.热启动:用户已经打开过,一定时间内再次打开的话就可以将后台切到前台就好.目前是5分钟间隔.
2.冷启动:首次打开.如果有版本更新,小程序会异步下载最新的代码.在下次打开的时候回更新到最新的代码.

加载机制:

在这里插入图片描述

小程序生命周期

小程序的生命周期函数是在app.js里面调用的,App(Object)函数用来注册一个小程序。接受一个 Object 参数,指定其小程序的生命周期回调;一般有onLaunch监听小程序初始化、onShow监听小程序显示、onHide监听小程序隐藏等生命周期回调函数
在这里插入图片描述
在这里插入图片描述

页面生命周期

页面生命周期函数就是当你每进入/切换到一个新的页面的时候,就会调用的生命周期函数。Page(Object) 函数用来注册一个页面。接受一个Object类型参数,其指定页面的初始数据、生命周期回调、事件处理函数

在这里插入图片描述
一般在onLoad或者onShow去获取服务中的数据

在这里插入图片描述

页面路由

有下面6中路由
在这里插入图片描述
在这里插入图片描述

小程序事件流

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
bindtap:逐层往外冒泡
capture-bind:tap 逐层捕获
capture-catch:tap ||catch:tap 可以阻止冒泡和捕获事件

微信小程序开发核心技能

微信小程序项目实战案例

小程序实战注意事项和进阶指导

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值