微信小程序入门笔记（一）

最新推荐文章于 2023-10-14 23:46:09 发布
最新推荐文章于 2023-10-14 23:46:09 发布
阅读量3.1k 收藏 13
点赞数 1
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tian_98/article/details/111479149
版权

day 01

1.微信公众平台

https://mp.weixin.qq.com/
品牌，营销

1.1微信公众平台概念
  • 微信公众平台，简称公众号。曾命名为“官号平台”、“媒体平台”、微信公众号，最终定位为“公众平台”，无疑让我们看到一个微信对后续更大的期望。
  • 利用公众账号平台进行自媒体活动，简单来说就是进行一对多的媒体性行为活动，如商家通过申请公众微信服务号通过二次开发展示商家微官网、微会员、微推送、微支付、微活动、微报名、微分享、微名片等，已经形成了一种主流的线上线下微信互动营销方式。
1.2微信公众平台的账号分类
1.2.1服务号
  • 服务号：为企业和组织提供更强大的业务服务与用户管理能力，主要偏向服务类交互（功能类似12315，114，银行，提供绑定信息，服务交互的）；
  • 适用人群：媒体、企业、政府或其他组织。
  • 群发次数：服务号1个月（按自然月）内可发送4条群发消息。
  • 所在的位置:在微信里像一个联系人会话一样存在。
1.2.2 订阅号
  • 订阅号：为媒体和个人提供一种新的信息传播方式，主要功能是在微信侧给用户传达资讯；（功能类似报纸杂志，提供新闻信息或娱乐趣事）
  • 适用人群：个人、媒体、企业、政府或其他组织。
  • 群发次数：订阅号（认证用户、非认证用户）1天内可群发1条消息。
  • 所在位置:在微信里像一个文件夹一样，所有的订阅号都在订阅号的文件夹中
1.2.3企业微信(企业号)
1.2.4小程序
  • 小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

2.小程序

2.1小程序的概念
  • 微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。
  • 全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。微信小程序、微信订阅号、微信服务号、微信企业号是并行的体系。
  • 微信小程序是一种不用下载就能使用的应用，也是一项创新，经过将近两年的发展，已经构造了新的微信小程序开发环境和开发者生态。微信小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果，已经有超过150万的开发者加入到了微信小程序的开发，与我们一起共同发力推动微信小程序的发展，微信小程序应用数量超过了一百万，覆盖200多个细分的行业，日活用户达到两个亿，微信小程序还在许多城市实现了支持地铁、公交服务。微信小程序发展带来更多的就业机会，2017年小程序带动就业104万人，社会效应不断提升。
2.2小程序的优缺点（重点）
  • 功能，速度，用户体验，开发成本 H5 app
优点
  • 功能比H5多,和原生app差不多，
  • 速度和H5一样，比原生app慢一些。
  • 用户体验较好,即用即走，无需下载
  • 开发成本不高
  • 基于微信的，用户群体比较大
  • 不需要下载（最大的特点）
  • 比较简单，容易上手（html+Css+js）
  • 开发成本低，节省时间和人力（小程序无论是安卓还是ios都可以用）
缺点
  • 微信小程序的代码量最大是2M,使用分包技术可以将代码量提升到20M，（伪app）
  • 上线时需要审核。
  • 不能分享到朋友圈(现在可以分享到朋友圈)。
  • 源码 只有2M(利用分包 将源码变成16M)
  • 上线比较麻烦（需要微信团队人工审核，审核日期1-7工作日）
  • 入口比较深（先登录温馨）
2.3小程序的应用场景
  • 各行各业都在使用，电商，微活动，抽奖，团购，打车。
  • 家政 餐饮 电商等等,如果碰见一些不确定的分类，找个相似的分类就可以
2.4小程序的发展前景
  • 依靠腾讯公司，（人多，钱多）
  • 运行环境微信 : 用户多，流量大
2.5微信小程序的接入流程
2.5.1开放注册范围

在这里插入图片描述

  • 百度小程序个人注册不了，支付宝小程序可以注册。
2.5.2提供的开发支持

在这里插入图片描述

2.5.3小程序的接入流程

在这里插入图片描述

2.5.3.1注册
  • 一个账号（邮箱）只能注册一个类型的公众平台的账号，一个微信号可以绑定多个账号

在这里插入图片描述

2.5.3.2填写邮箱

在这里插入图片描述

2.5.3.3激活链接
2.5.3.4选择主体信息
  • 小程序是属于谁的

在这里插入图片描述

2.5.3.5填写主体信息

在这里插入图片描述

2.5.3.6绑定微信账号
  • 扫码绑定微信账号，下一次直接使用微信扫码登录就行。
2.6微信小程序管理后台介绍
2.6.1首页

在这里插入图片描述

2.6.2小程序的信息的设置

在这里插入图片描述

2.6.3小程序的开发设置
2.6.3.1appid

在这里插入图片描述

  • appid是小程序的唯一的标示，上线时要使用，开发时可以不用。
2.6.3.2服务器的域名
  • 小程序没有跨域，小程序上线后要在小程序的管理后台开发设置中填写请求的域名，否则不能请求成功
    在这里插入图片描述
2.6.3.3统计
  • 一般小程序的运营人员会看。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

2.6.3.4版本管理
  • 开发版本:开发者在微信开发者工具中开发完成了代码点击上传形成了开发版本。
  • 体验版本:是开发版本设置过来的（有体验权限的人才能体验）
  • 审核版本:开发版本提交审核得到审核版本。（审核挺严格，1-7个工作日）
  • 线上版本：微信后台管理员审核审核版本通过后获得线上版
2.6.3.5成员管理（最多有31个人）
  • 管理员：小程序的拥有者

在这里插入图片描述

  • 项目成员
    • 参与项目开发和体验运营的人员项目的成员是管理员添加的，可以根据工作职责的不同，分配不同的权限，最多能添加15人。
      在这里插入图片描述
  • 体验成员，是管理员添加的，点击添加按钮，搜索微信号，点击添加，最多能添加15人。
    在这里插入图片描述

3.微信开发者工具

3.1下载

在这里插入图片描述

3.2安装
  • 安装时不要安装在C盘,尽量不要放置在中文路径下。傻瓜式安装
3.3使用

在这里插入图片描述
在这里插入图片描述

3.4新建一个项目
  • 选择一个空目录。

在这里插入图片描述
在这里插入图片描述

3.5开发者工具的讲解
  • 1菜单栏
  • 2工具栏
  • 3 模拟器（类似微信app）
  • 4目录结构
  • 5编辑代码的部分
  • 6调试器所在的区域
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
3.6关于编译
  • 就是将小程序的代码通过基础库编译成各个平台（andriod,ios）认识的代码,编译的过程不用我们操作，开发者工具自动帮我们编译好了
3.7关于appId
  • 只有真实appid才能上线小程序，使用云开发

4.小程序的目录结构

  • 目录和文件组成
  • 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page组成
  • 目录
    • pages:小程序的页面放在该目录，一般一个目录就是一个页面
      • **.js :放置的该页面的逻辑
      • **.json:放置该文件的配置
      • **.wxss 对标css，该文件中放置的是页面的样式
      • **.wxml 对标html，该文件中放置的是该页面结构
    • utils:放置的是项目模块化的公共代码（模块文件，可以做一些功能模块封装）
    • common:公共的样式，
    • components：公共的组件
    • static:公共的资源,图片，视屏，音频文件
  • 文件
    • app.js ：放置的整个小程序的逻辑。（项目的入口js文件）
    • app.json : 放置的是整个小程序的配置（项目的配置文件）
    • app.wxss：放置的是小程序整体的样式结构（全局的css样式文件）
    • project.config.json：项目配置文件，不要手动修改里面的配置，记录用户配置的喜好，即使换了小程序的运行环境，不用重新配置了。
    • sitemap.json：配置微信能不能搜索到该小程序（栈点索引）
小程序目录描述
  • 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
  • 一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：
文件 必需 作用
app.js 是 小程序逻辑
app.json 是 小程序公共配置
app.wxss 否 小程序公共样式表
  • 一个小程序页面由四个文件组成，分别是：
文件类型 必需 作用
js 是 页面逻辑
wxml 是 页面结构
json 否 页面配置
wxss 否 页面样式表
允许上传的文件类型
  • 在项目目录中，以下文件会经过编译，因此上传之后无法直接访问到：*.js、app.json、*.wxml、*.wxss（其中 wxml 和 wxss 文件仅针对在 app.json 中配置了的页面）。除此之外，只有后缀名在白名单内的文件可以被上传，不在白名单列表内文件在开发工具能被访问到，但无法被上传。具体白名单列表如下：
    • wxs
    • png
    • jpg
    • jpeg
    • gif
    • svg
    • json
    • cer
    • mp3
    • aac
    • m4a
    • mp4
    • wav
    • ogg
    • silk

5.小程序的配置

5.1全局配置
  • 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径（配置路由及）、窗口表现、设置网络超时时间、设置多 tab 等。
    • 1 是一个json格式的数据
    • 2 语法格式很严格
    • 3 不允许写注释
5.1.1pages
  • 页面路径列表
    • 页面路径不能以/ ./ …/ 开头
    • 数组中的每一项都要用逗号隔开，最后不加逗号
    • 不能使用单引号
  • 配置小程序的路由，必填，里面放置的小程序的页面
 "pages": [

​    "pages/index/index",

​    "pages/cart/cart",

​    "pages/my/my",

​    "pages/cate/cate"

  ],
5.1.2entryPagePath
  • 设置小程序的默认启动的页面。
  • 如果有entryPagePath属性，默认启动的首页就是该选项配置的
  • 如果没有entryPagePath属性，默认启动的页面使用pages属性中的第一个页面
  • 一般开发者习惯将index页面作为首页
"entryPagePath": "pages/index/index",
5.1.3window

在这里插入图片描述

  • 用于设置小程序的状态栏、导航条、标题、窗口背景色。
{
   
  "pages": [
    "pages/index/index",
    "pages/a/a",
    "pages/logs/logs",
    "pages/b/b"
  ],
  "window": {
   
    "navigationBarBackgroundColor": "#f00",
    "navigationBarTitleText": "我的",
    "navigationBarTextStyle": "black",
     //  下拉刷新界面的背景颜色，需要开启enablePullDownRefresh，才能看见效果
    "backgroundColor": "#ccc",
    "enablePullDownRefresh": true,
    "backgroundTextStyle": "light",
     //  设置导航栏  如果设置custom 设置自定义导航栏   之前做的导航栏样式都不会再有效果
    "navigationStyle": "custom"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}
5.1.4tabbar配置
"tabBar": {
   
    "color":"#ccc",
    "selectedColor": "#f00",
    "backgroundColor": "#fff",
    "borderStyle": "white",
    "position": "top",
    "custom": false,
    "list": [
        {
   
          "pagePath": "pages/index/index",
          "text":"首页",
          "iconPath": "./images/index.png",
          "selectedIconPath": "./images/indexFull.png"
        },
        {
   
          "pagePath": "pages/car/car",
          "text":"购物车",
          "iconPath": "./images/cart.png",
          "selectedIconPath": "./images/cartFull.png"
        }
        ,
        {
   
          "pagePath": "pages/mine/mine",
          "text":"个人中心",
          "iconPath": "./images/my.png",
          "selectedIconPath": "./images/myFull.png"
        }
    ]
  },

注意

  • 至少设置2个，最多5个tab
  • position设置为top的时候 iconpath和selectedIconpath没有效果
  • iconpath和selectedIconpath图片40kb 不能使用网络图片
  • pagePath的页面文件路径不能以/ …/ ./ 开头
5.2页面配置
  • 页面配置文件高于全局配置文件，只能配置window项
  • 每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。页面配置的作用范围只作用于该页面。
  "navigationBarBackgroundColor": "#ff0000",

  "navigationBarTextStyle": "white",

  "navigationBarTitleText": "小u商城",

   "backgroundColor": "#00ff00",

   "backgroundTextStyle": "dark",

   "enablePullDownRefresh": true
5.3sitemap配置(了解)
  • 栈点索引
  • 微信现已开放小程序内搜索，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中
5.3.1在小程序管理的后台配置是否允许被搜索到
  • 打开小程序的管理后台----页面内容收录

在这里插入图片描述

5.3.2配置sitemap.json
  • 虽然在小程序的管理后台配置了希望被微信搜索到，要配置搜索规则。
  • 默认规则:如果sitemap中的规则没有一个命中的画则使用默认规则，所有的页面都将被搜索得到
  • 小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引；sitemap.json 有以下属性：
配置项
属性 类型 必填 描述
rules Object[] 是 索引规则列表
  • 一个对象就是一个访问规则
{
   

 "rules": [{
   

  "action": "disallow",

  "page":"/pages/cart/cart"

 },{
   

  "action": "disallow",

  "page":"/pages/my/my"

 },{
   

  "action": "allow",

  "page":"/pages/detail/detail",

  "params": ["price","info"],

  "matching": "partial"

 }]

}
rules
  • rules 配置项指定了索引规则，每项规则为一个JSON对象，属性如下所示：
属性 类型 必填 默认值 取值 取值说明
action string 否 “allow” “allow”、“disallow” 命中该规则的页面是否能被索引
page string 是 “*”、页面的路径 * 表示所有页面，不能作为通配符使用
params string[] 否 [] 当 page 字段指定的页面在被本规则匹配时可能使用的页面参数名称的列表（不含参数值）
matching string 否 “inclusive” 参考 matching 取值说明 当 page 字段指定的页面在被本规则匹配时，此参数说明 params 匹配方式
priority Number 否 优先级，值越大则规则越早被匹配，否则默认从上到下匹配
  • matching 取值说明
值 说明
exact 当小程序页面的参数列表等于 params 时，规则命中
inclusive 当小程序页面的参数列表包含 params 时，规则命中
exclusive 当小程序页面的参数列表与 params 交集为空时，规则命中
partial 当小程序页面的参数列表与 params 交集不为空时，规则命中
  • 对于没有参数的页面使用action和page就能完成配置，对于有参数的页面，需要params和matching配合使用，根据页面的需求.
  • 一般项目完成后在进行配置。

6小程序场景值

6.1概念
  • 场景值用来描述用户进入小程序的路径。完整场景值的含义请查看，用户怎么进入小程序。
6.2应用
  • 不同场景值做不同的业务。
  • kfc:通过扫码进入的小程序，跳转到点餐页面，通过公众号菜单，进入到发放优惠券的界面。
onLaunch: function (option) {
   

  if(option.scene==1035){
   

   console.log("发放优惠券")

  }

  if(option.scene==1011){
   

   console.log("点餐")

  }  

 },
6.3获取场景值的方式

场景值

App({
   
  // 小程序初始化完成走的生命周期
  onLaunch(a){
   
      // console.log("onlaunch",a)
      // 同步 
      let b = wx.getLaunchOptionsSync();
      console.log(b)
      if(b.scene==1011){
   
        console.log("活动详情")
      }
  },
  onShow(e){
   
    console.log("onshow",e)
    }
   
})

day 02

  • 小程序的配置
    • 全局配置—app.json–所有页面----路由–全局窗口–tabBar–分包–注册全局组件
    • 局部配置–页面对应的json文件–当前页面生效—页面窗口–局部注册组件
    • 局部配置–覆盖全局

1小程序的逻辑层

  • 小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。
1.1逻辑层的概念
  • 逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
  • 开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在小程序启动的时候运行，直到小程序销毁。这一行为类似 ServiceWorker，所以逻辑层也称之为 App Service。
  • 在 JavaScript 的基础上，我们增加了一些功能，以方便小程序的开发：
    • 增加 App 和 Page 方法，进行程序注册和页面注册。
    • 增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
    • 提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
    • 提供模块化能力，每个页面有独立的作用域。
    • 注意：小程序框架的逻辑层并非运行在浏览器中，因此 JavaScript 在 web 中一些能力都无法使用，如 window，document 等。
1.2注册小程序
  • 每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。
  • 注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。
  • App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。
1.2.1小程序的生命周期监听方法
App({
   
	 /**	
	  \* 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）	
	  */	
	 onLaunch: function () {
   
	  console.log("app launch")	
	 },	
	 /**	
	  \* 当小程序启动，或从后台进入前台显示，会触发 onShow	
	  */	
	 onShow: function (options) {
   	
	  console.log("app show")	
	 },	
	 /**	
	  \* 当小程序从前台进入后台，会触发 onHide	
	  */	
	 onHide: function () {
   	
	  console.log("app hide")	
	 },	
	 /**	
	  \* 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息（当小程序有报错信息，无论是页面文件还是全局文件，只要有报错信息，就会触发onerror函数）	
	  */	
	 onError: function (msg) {
   	
	  //调用记录日志接口	
	 },	
	 onPageNotFound:function(){
   	
	  wx.navigateTo({
   	
	   url: './pages/notfound/notfound',	
	  })	
	 }
})
1.2.2其他
  • 用户可以在App中自定义一些属性和方法，然后通过this.属性/方法去调用，
App({
   
	 globalData:{
   	
	  token:"",	
	  userinfo:""	
	 },	
	 /**	
	  \* 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）	
	  */	
	 onLaunch: function () {
   	
	  this._login()	
	 },	
	 _login:function(){
   	
	  //判断用户有没有登录过	
	  //如果登录过	
	  //调用登录的接口,返回对应的token	
	  //将token存储到缓存中，再将token放到globalData中，这里globalData就是全局变量	
	  console.log("login ok")	
	  this.globalData.token="abcdefgh124343242"
	  this.globalData.userInfo={
   
	  	name:"zhangsan"
	  }	
	  console.log(this.globalData)	
	 },	
	 /**	
	  \* 当小程序启动，或从后台进入前台显示，会触发 onShow	
	  */	
	 onShow: function (options) {
   	
	  console.log("app show")	
	 },
	 /**	
	  \* 当小程序从前台进入后台，会触发 onHide	
	  */	
	 onHide: function () {
   	
	  console.log("app hide")	
	 },	
	 /**	
	  \* 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息	
	  */	
	 onError: function (msg) {
   	
	  //调用记录日志接口	
	 },	
	 onPageNotFound:function(){
   	
	  wx.navigateTo({
   	
	   url: './pages/notfound/notfound',	
	  })	
	 }
})
  • 在App.js获取全局变量和函数
//app.js
App({
   
 
  // 小程序启动或者切前台
  onShow(){
   
    console.log("onshow")
   
  },
  // 小程序初始化完成 全局只触发一次
  onLaunch(){
   
    console.log("onlaunch")
    console.log(this.userInfo.name)
    console.log(this.userInfo.age)
    console.log(this.say())
  },
  // 小程序切后台的时候触发
  onHide(){
   
    console.log("onhide")
  },
  // 当小程序有报错信息，无论是页面文件还是全局文件，只要有报错信息，就会触发onerror函数
  onError(err){
   
    console.log("错误信息",err)
  },
  onPageNotFound(){
   
    console.log("页面不存在")
    wx.navigateTo({
   
      url: '/pages/logs/logs',
    })
  },
  // 全局的变量
  userInfo:{
   
    name:"张三",
    age:20
  },
  // say(){
   
  //     return  "正在吃东西" 
  // }
  // 全局的函数
  say:function(){
   
    // console.log(this.userInfo,"函数")
    // 在函数内部访问全局变量
    return  this.userInfo.name +  "正在吃东西"
  }
})
  • 在其他页面的js获取全局变量和函数
// 获取app实例唯一的方法
let app = getApp();
console.log(app.userInfo.name)

// 注意事项：不要在页面中调用app的生命周期
Page({
   
 
})
1.2.3getApp的使用
  • 整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用自定义函数开发者注册在 App 上的函数。
// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data
1.2.4使用getapp的注意事项
  • 不要在定义于 App() 内的函数中，或调用 App 前调用 getApp() ，使用 this 就可以拿到 app 实例。
  • 通过 getApp() 获取实例之后，不要私自调用生命周期函数。
1.3注册页面
  • 对于小程序中的每个页面，都需要在页面对应的 js 文件中使用Page构造方法进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。
1.3.1页面的生命周期监听函数
Page({
   
	 /**
	  \* 页面的初始数据
	  */
	 data: {
    
	 },
	 /**
	  \* 生命周期函数--监听页面加载
	  */
	 onLoad: function (options) {
   
	  console.log("index load")
	 },
	 /**
	  \* 生命周期函数--监听页面初次渲染完成
	  */
	 onReady: function () {
   
	  console.log("index ready")
	 },
	 /**
	  \* 生命周期函数--监听页面显示
	  */
	 onShow: function () {
   
	  console.log("index show")
	 },
	 /**
	  \* 生命周期函数--监听页面隐藏
	  */
	 onHide: function () {
   
	  console.log("index hide")
	 },
	 /**
	  \* 生命周期函数--监听页面卸载
	  */
	 onUnload: function () {
   
	  console.log("index unload")
	 },
	 /**
	  \* 页面相关事件处理函数--监听用户下拉动作
	  */
	 onPullDownRefresh: function () {
   
	  console.log("下拉刷新")
	 },
	 /**
	  \* 页面上拉触底事件的处理函数
	  */
	 onReachBottom: function () {
   
	  console.log("加载更多")
	 },
	 /**
	  \* 用户点击右上角分享
	  */
	 onShareAppMessage: function () {
   
	 }
})
  • 生命周期顺序（不含异步）：
    • 进入的时候：app.js的onLaunch—onshow 页面的onLoad—页面的onShow
    • 离开的时候：页面的onHide—app.js的onHide
1.3.2关于data
  • data 是页面第一次渲染使用的初始数据。
  • 页面加载时，data 将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。
  • 渲染层可以通过 WXML 对数据进行绑定。
//修改数据 
this.setData({
         
  num:2 
})
  • 里面放置页面初始化的数据.初始化的数据可以展示在视图层。
  • this.data.键名：获取
  • this.setData( {键名：new键值})：设置
	data: {
   
	  name:"zhangsan",
	  age:"18"
	 },
	 /**
	  \* 生命周期函数--监听页面加载
	  */
	 onLoad: function (options) {
   
	  this._login()
	 },
	 _login:function(){
   
	  console.log("login ok") 
	 },
	 _fn:function(){
   
	  this.setData({
   
	​    age:2
	  })
	 },
  • 页面的处理函数
// pages/demo1/demo1.js
Page({
   

  /**
   * 页面的初始数据
   */
  data: {
   
      num:1,
  },
  //页面的下拉刷新，必须先把enablePullDownRef开启才可以出发该事件函数
  onPullDownRefresh(){
   
    console.log("demo1的下拉刷新")
    this.setData({
   
      num:2
    })
    console.log(this)
  },
  //默认是距离底部有50px的时候，触发该函数，如果想改变距离，设置onReachBottomDistance就可以
    onReachBottom(){
   
    console.log("demo1的上拉刷新")
  },

  // 页面滑动事件   
  onPageScroll(e){
   
    console.log("页面的滚动事件",e)
  }
  
})

注意：请只在需要的时候才在 page 中定义此方法，不要定义空方法。以减少不必要的事件派发对渲染层-逻辑层通信的影响。 注意：请避免在 onPageScroll 中过于频繁的执行 setData 等引起逻辑层-渲染层通信的操作。尤其是每次传输大量数据，会影响通信耗时。

1.3.3getCurrentPages
  • 获取当前的页面栈，页面栈是一个数组，用户访问过的页面都记录在这个数组里,方便用户返回
  • 数组中第一个元素为首页，最后一个元素为当前页面。
    • 不要尝试修改页面栈，会导致路由以及页面状态错误。
    • 不要在 App.onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。
1.4小程序的页面生命周期

在这里插入图片描述

2小程序的视图层

2.1视图层的概念
  • 框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。
  • 将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。
  • WXML(WeiXin Markup language) 用于描述页面的结构。
  • WXSS(WeiXin Style Sheet) 用于描述页面的样式。
  • 组件(Component)是视图的基本组成单元。
2.2wxml（小程序的结构）
  • 放置组件+要渲染的数据
  • 数据绑定
<!-- 1.普通的数据绑定 -->
<view> {
  {msg}} </view>
<!-- 2.属性绑定 -->
<!-- <view id="box"></view> -->
<view id="{
    {ID}}"></view>
<!-- 3.关键字绑定  true/false 
    hidden  隐藏  true隐藏 false显示
    "132"-----true
    注意：非空字符串转成布尔值，都是转换为true
        因此需要改写为  "{
   { true/false }}"
-->
<view hidden="{
    { false }}">主人下马客在船</view>

<!-- 4.运算 -->
<!-- 4.1算术运算 -->
<view>{
  {1+2+num}}</view>
<!-- 4.2字符串运算 -->

<!-- 123  33 -->
<view>{
  {1+2+"3"}}</view>
<!--  -->
<view>{
  {1+"2"+3}}</view>
<!-- 4.3三元运算/三目运算  表达式 ?  true的执行代码 :  false的执行代码 -->
<view>{
  { store>=60?"及格":"不及格" }}</view>
<!-- 4.4 路径运算  就是如何拿数组中的值和对象的值 -->

 <view>{
  {arr[0]}}</view>
 <view>{
  {arr[1]}}</view>
 <view>{
  {arr[2]}}</view>
 <view>
   {
  {obj.name}}------{
  {obj.text}}
 </view>

 <!-- 注意事项 -->
 <view></view>
  • 注意:无论是普通的数据绑定，还是属性绑定，或者是其他的，只要进行数据渲染，都需要加{ {}}
  • 列表渲染
<!-- 
  wx:for  列表渲染
  wx:for="{
   { [1,2,3,4] }}"
  item    默认的数据列表项
  index   默认的下标
  改变默认值
  wx:for-index="属性值"
  wx:for-item="属性值"
  注意：如果改变了默认值，之前的item，index就不再起作用

  vue   v-for="(item,index) in arr"  {
   {item}}===={
   {index}}
 -->

 <view wx:for="{
    {[1,2,3,4]}}" wx:key="*this"> 
      {
  {index}}-------{
  {item}}

 </view>
最低0.47元/天 解锁文章
shadow_tian1
关注
  • 1
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
小程序日记：基础篇
qq_44719515的博客
06-21 3594
文章目录一、全局配置配置项1、pages2、window3、tabBar3.1：list的属性二、页面配置 page.json配置项配置示例三、sitemap 配置配置项rules配置示例WXML语法四、数据绑定1、简单绑定1.1、内容1.2、组件属性(需要在双引号之内)1.3、控制属性(需要在双引号之内)1.4、关键字(需要在双引号之内)2、运算2.1、三元运算2.2、算数运算2.3、逻辑判断2.4、字符串运算2.5、数据路径运算3、组合3.1、数组3.2、对象五、列表渲染1、wx:for2、block
微信小程序开发的基本流程
LeoStarry2014的博客
10-25 3330
微信小程序开发的基本流程 一,微信小程序简介 1,微信小程序简称小程序，张小龙在微信公开课 Pro 上发布的小程序正式上线，时间是2017年1月9日。 2,微信小程序这个词可以分解为“微信”和“小程序”两部分 (1),其中“微信”可以理解为“微信中的”，指的是小程序的执行环境；当然微信在提供执行环境的同时也延长了用户使用微信的时间。 (2),“小程序”是说它首先是程序，然后具备...
日记小程序
04-16
用java语言编写的一个小程序，涉及到mysql相关的知识
微信小程序开发流程步骤 简单 详细
IT界的阿基米德
05-28 9280
微信小程序是一种不需要下载安装即可使用的应用，它搭载在目前最流行、用户量最大的社交软件“微信”中，用户通过扫一扫或搜索小程序名字即可找到使用想要的小程序并进行使用，非常的方便快捷。对于开发者而言呢，它也有非常全面、稳定、高效的接口API供开发者使用，而且相对来说比较容易的部署和发布应用，也很不错。今天我们就来看下该如何部署微信小程序的开发环境。 一、首先我们需要注册一个微信小程序的账号（注意微信小...
微信小程序日记本Demo
09-10
挺好的小程序Demo，互相学习。便于学习微信小程序开发。小程序可以上传照片、文字、图像，记录自己的生活。也可以网络小记事本来使用
微信小程序入门+实战案例+代码+常用demo
08-13
微信小程序入门教程+实战案例展示+实战代码+常用demo，
C#程序员入门学习微信小程序的笔记
12-01
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，它允许开发者在微信内创建原生体验的应用程序，无需安装即可使用。微信小程序的主要特点是快速、便捷和易于分发，用户可以通过微信客户端直接访问和使用。 ...
微信小程序-云笔记小程序项目源码-原生开发框架-含效果截图示例.zip
最新发布
05-27
微信小程序，作为腾讯倾力打造的一款轻量级应用，凭借其独特的优势在移动开发领域崭露头角。它无需下载安装，用户扫一扫或搜一下即可打开应用，体验上更加便捷高效。小程序不仅拥有近似原生App的用户体验，还完美...
微信小程序笔记入门到做项目
08-28
微信小程序笔记，步骤很详细有
微信小程序开发日记 (4) 样式设计
weixin_50340097的博客
07-24 207
尺寸单位 rpx可以根据屏幕宽度进行自适应，也就是说可以通过屏幕的尺寸进行像素大小的自适应 样式文件导入
微信小程序开发教程（共90课）
10-06
微信小程序开发教程-随着智能手机的极大普及，微信程序为开发人员提供了更广阔的开发平台。
一篇文章带你搞懂微信小程序的开发过程
热门推荐
pdcfighting的博客
08-24 3万+
点击上方“前端进阶学习交流”，进行关注回复“前端”即可获赠前端相关学习资料今日鸡汤只解沙场为国死，何须马革裹尸还。大家好，我进阶学习者。前言小程序想必大家应该都不陌生了吧，今天小编带大家一...
微信小程序开发流程
我的博客简介
07-20 2万+
新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的AppID，给你的项目起一个好听的名字，勾选“不使用云服务”（注意你要选择一个空的目录才可以创建项目），点击新建，你就得到了你的第一个小程序了，点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。用户只需要点击一键登录，就可以做到登录，无需另外多出弹框，提示用户授权，之所以弹出框是为了获取更多的用户信息，如想获取手机号，一个用户手机号可以存在多个，但是用户openid是唯一的，参考线上小程序。.........
微信小程序开发步骤
qq_54396517的博客
12-08 339
11
微信小程序开发步骤详解
qq_45274635的博客
06-07 4097
目标:○ 开发前准备。○ 微信开发者工具。○ 第一个小程序项目。○ 小程序的目录结构。○ 样式及相应式布局。○ 小程序事件。○ 小程序配置。
开发微信小程序的步骤有哪些？
qq_42010885的博客
04-17 607
    几年前，微信的公众号好多人不屑一顾，等看到很多公众账号赚的盆满钵满时才发现错过了商机。现在微信的小程序也算是初露头角，而很多人已经开始发现了其中的捷径与商机。可有些人还不知道如何入门。其实微信小程序的开发并不复杂，和当初的微信公众号的流程类似。　　　　首先，我们需要注册一个微信小程序，注册成功后我们需要获取微信小程序ID，填写后，界面跳转，我们需要下载微信小程序开发者工具。下载成功后，选择...
微信小程序开发流程详解
shine的博客
03-04 3242
一 申请小程序账号 1 找到微信小程序所在链接入口 打开微信小程序所在公众平台链接地址，注意不是开发平台。 https://mp.weixin.qq.com 如图： 2 注册小程序号码 点击步骤1 的小程序进入如下图： 注意 邮箱必须未被微信公众平台注册，未被微信开发平台注册，未被个人微信号绑定的邮箱。 3 邮箱激活 去填写的邮箱去激活，主要是进入邮箱后，点击里边的...
微信小程序入门及开发教程
weixin_74268571的博客
10-14 918
微信小程序的介绍，注册小程序账号并安装小程序开发工具，简单创建小程序，了解微信小程序目录结构
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值