微信小程序学习笔记1.0

第1章 微信小程序基础

1.1 微信小程序介绍

1.1.1 什么是微信小程序

微信小程序的特点:

① 微信小程序是不需要下载和安装的;

② 它可以完成App应用软件的交互功能;

③ 用户扫一扫或者搜一下就可以使用小程序;

④ 微信小程序无处不在,随时随地可以使用;

⑤ 微信小程序无须卸载,应用方便。

1.1.2 微信小程序发展历程

① 2016年1月9日,微信团队首次提出“应用号”概念。

②2016年9月22日,微信公众平台对外发送小程序内测邀请,内测名额200个。

③2016年11月3日,微信小程序对外公测,开发完成后可以提交审核,但公测期间不能发布。④2016年12月28日,张小龙在微信公开课上解答外界对微信小程序的几大疑惑,包括没有应用商店、没有推送消息等内容。

⑤2016年12月30日,微信公众平台对外公告,上线的微信小程序最多可生成10000个带参数的二维码。

⑥2017年1月9日,微信小程序正式上线。

1.1.3 微信小程序提供的功能

1.支持分享当前界面功能,分享出去的是动态的界面

2.小程序线下扫码功能

3.小程序支持挂起状态

4.小程序的消息通知

5.小程序和公众号能相互跳转

6.小程序的搜索和历史列表

1.1.4 微信小程序不能提供的功能

① 小程序没有集中入口,没有应用商店。

② 小程序没有订阅关系。

③ 小程序不能推送消息。

④ 小程序不能做游戏。

1.1.5 微信小程序带来的机会

● 给企业带来机会:对于已有App软件的公司,提供了新的方式推广产品,而对于创业公司来说,使用微信小程序可以降低推广产品的成本。

● 给创业者带来机会:创业者可以围绕小程序做社区、做应用商店、做微信小程序开发平台、做教育培训及出版书籍等来进行创业。

● 给小程序员带来机会:给学生、网站编辑、前端开发人员等想做程序员的人们,提供了做小程序员的就业机会。

1.2 微信小程序开发工具的使用

(1)微信小程序开发文档:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=2017112

(2)公众平台申请开发者账号:

微信公众平台

(3)申请一个AppID:

访问微信公众平台,注册微信公众平台账号,选择小程序类型进行注册。注册成功后登录微信公众平台,开发者就可以在网站“设置”下的“开发设置”选项卡中查看到微信小程序的AppID,不可直接使用服务号或订阅号的AppID。

1.2.3 微信开发者工具的使用

1.编辑功能

微信开发者工具界面可以用于代码编辑、代码调试、项目预览与上传、编译、前后台切换、缓存数据清理及关闭项目。

在硬盘中打开文件的目录,可以新建4种文件:.js、.json、.wxml和.wxss文件,对文件进行重新命名、删除和查找操作。

.js文件编辑会帮助开发者补全所有的API,并给出相关的注释解释;.wxml文件编辑会帮助开发者直接写出相关的标签;.json文件编辑会帮助开发者补全相关的配置,并给出实时的提示。

注:只有保存文件,修改内容才会真实地写入硬盘中,并触发实时预览。

2.调试功能

小程序的调试工具有Console、Sources、Network、Storage、AppData、wxml。

  • Console窗口用来显示小程序的输出出错信息和调试代码
  • Sources窗口用于显示当前项目的脚本文件,在Sources窗口中开发者看到的文件是经过处理后的脚本文件
  • Network用来观察发送的请求和调用文件的信息
  • Storage窗口用于显示当前项目使用wx.setStorage 或wx.setStorageSync后的数据存储情况
  • AppData窗口用于显示当前项目、当前时刻具体数据,实时地反馈项目数据情况。用户可以在此处编辑数据,并及时地反馈到界面上
  • Wxml窗口用于帮助开发者开发wxml转换后的界面。在这里可以看到真实的页面结构及结构对应的wxss属性,同时可以修改对应wxss属性

3.项目功能

在项目模块中,可以看到微信小程序项目的相关信息,包括项目名称、AppID、项目文件的路径,如果有AppID的项目,可以在手机上预览微信小程序,将小程序上传

4.编辑功能

编辑:对整个项目进行重新编译

5.前台、后台功能

后台是指微信小程序从前台进入后台,例如在操作微信小程序过程中,突然打进来电话,如果接电话,这时小程序从前台进入后台;重新访问小程序,又会从后台进入前台

6.缓存功能

缓存用来清除数据存储、清除文件存储及清除用户授权数据

1.3 微信小程序框架文件

微信小程序框架文件分为三部分:框架全局配置文件、工具类文件和框架页面文件。

框架全局配置文件是从项目全局的角度对项目进行配置管理,工具类文件对应的是一些常用的.js工具处理,框架页面文件对应的是微信小程序各个页面。

1.3.1 框架全局配置文件

一个小程序框架配置文件由app.js、app.json和app.wxss 3个文件组成。它们作为全局文件,必须放在项目的根目录。

1.app.js小程序逻辑文件

定义全局数据和函数,可指定微信小程序的生命周期函数,不同阶段不同场景可使用不同的生命周期函数;还可以定义一些全局的函数和数据,其他页面引用app.js文件后就可以直接使用全局函数和数据。

2.app.json小程序公共设置

全局配置文件,可设置5个功能:配置页面路径、配置窗口表现、配置标签导航、配置网络超时和配置debug模式

① 配置页面路径,app.json定义一个数组存放多个页面的访问路径(页面访问的必要条件)

② 配置窗口表现,用于配置小程序的状态栏、导航条、标题、窗口背景色,可以设置导航条背景色(navigationBarBackgroundColor)、导航条文字(navigationBarTitleText)及导航条文字颜色(navigationBarTextStyle),还可以设置窗口是否支持下拉刷新(enablePullDownRefresh),默认值是不支持下拉刷新的,设置窗口的背景色(backgroundColor)、下拉背景字体或文本样式(backgroundTextStyle)

③ 配置标签导航

在app.json中配置tabBar属性。tabBar是一个对象,可以配置标签导航文字默认颜色、选中颜色、标签导航背景色及上边框颜色,上边框颜色可以配置black、white两种颜色。标签导航存放到list数组中,有一个标签导航就在list中配置标签导航,list中的每个对象对应一个标签导航,每个对象中可以配置标签导航的路径、导航名称、默认图标及选中图标

④ 配置网络超时,可以配置网络请求、文件上传及文件下载时最长的请求时间,超过这个时间,不再允许请求

⑤ 配置debug模式,用于方便微信小程序开发者调试开发程序

3.app.wxss小程序公共样式文件

对CSS样式进行扩展,使用方式与CSS的一样,类选择器和行内样式的写法兼容大部分CSS样式。扩展了CSS样式,是针对所有页面定义的一个全局样式。

除了app.wxs提供的默认全局样式,用户还可以自行定义一些全局样式。

1.3.2 工具类文件

微信小程序框架目录中有一个utils文件夹,用来存放工具类的函数。定义完函数后,要通过module.exports将定义的函数名称进行注册,这样在其他的页面才可以使用。

1.3.3 框架页面文件

微信小程序的框架页面文件都是放置在pages文件夹下的,一个小程序框架页面文件由4个文件组成,分别是.js页面逻辑、.json页面配置、.wxml页面结构、.wxss页面样式表文件。每个页面都有一个独立的文件夹。

1.4 微信小程序逻辑层

小程序开发框架的逻辑层是用JavaScript编写的。逻辑层将数据进行处理后发送给视图层,同时接收视图层的事件反馈。编写过程中,在JavaScript的基础上做了一些扩展。逻辑层称为App Service。

1.4.1 APP()注册程序

函数App() 用来注册一个小程序。接收一个object 参数,其负责指定小程序的生命周期函数等。

相关的生命周期函数包括:

  • onLaunch监听小程序初始化
  • onShow监听小程序显示
  • onHide监听小程序隐藏
  • onError错误监听函数
    App({onLaunch: function() {// Do something initial when launch.},onShow: function() {// Do something when show.},onHide: function() {// Do something when hide.},onError: function(msg) {console.log(msg)},globalData: 'I am global data'})

注意:App() 必须在app..js 中注册,且不能注册多个;不要在定义于App() 内的函数中调用getApp(),使用this 就可以获取app实例;不要在运行onLaunch 时调用getCurrentPage(),此时page 还没有生成;通过getApp() 获取实例后,不要私自调用生命周期函数。

1.4.2 Page()注册页面

函数Page() 用来注册一个页面。接收一个object 参数,其负责指定页面的初始数据、生命周期函数和事件处理函数等。

相关的生命周期函数包括:

  • onLoad监听页面加载
  • onReady监听页面初次渲染完成状态
  • onShow监听页面显示
  • onHide监听页面隐藏
  • onUnload监听页面卸载
    Page({data: {text: "This is page data."},onLoad: function(options) {// Do some initialize when page load.},onReady: function() {// Do something when page ready.},onShow: function() {// Do something when page show.},onHide: function() {// Do something when page hide.},onUnload: function() {// Do something when page close.},onPullDownRefresh: function() {// Do something when pull down.},onReachBottom: function() {// Do something when page reach bottom.},onShareAppMessage: function () {// return custom share data when user share.},// Event handler.viewTap: function() {this.setData({text: 'Set some data for updating view.'})},customData: {hi: 'MINA'}})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/79099.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

正则表达式提取返回报文data里面的\“id\“:312254,的值

要使用正则表达式提取返回报文 data 字段里的 "id":312254 的值,您可以编写一个合适的正则表达式,并使用 Java 中的正则表达式匹配和提取功能。 假设 data 是一个包含 JSON 字符串的字段,类似于以下格式: { "…

【Python】IP地址解析并生成

IP地址解析并生成 #!python3 # codingutf-8 import logging import ipaddresslogging.basicConfig(levellogging.INFO,format%(asctime)s [%(filename)s:%(lineno)d] %(levelname)s # %(message)s,datefmt%Y-%m-%d %M:%S)def parse_ipaddress_user(addrs, flag):addr_fields s…

DRF02-请求响应与路由

文章目录 1. http请求响应1.1. 请求与响应1.1.1 Request1.1.1.1 常用属性1).data2).query_params3)request._request基本使用1.1.2 Response1.1.2.1 构造方式1.1.2.2 response对象的属性1).data2).status_code3).content1.1.2.3 状态码1)信息告知 - 1xx2)成功 - 2xx3)…

Python模板注入(SSTI)

概念 发生在使用模板引擎解析用户提供的输入时。模板注入漏洞可能导致攻击者能够执行恶意代码或访问未授权的数据。 模板引擎可以让(网站)程序实现界面与数据分离,业务代码与逻辑代码分离。即也拓宽了攻击面,注入到模板中的代码可…

数据库逻辑透明-架构真题(二十九)

(2020年)假设某计算机字长为32位,该计算机文件管理系统磁盘空间管理采用位示图(bitmap)记录磁盘的使用情况。若磁盘的容量为300GB,物理块大小为4MB,那么位示图的大小为()…

海外媒体发稿:海外汽车媒体推广9个方式解析

根据下列9个国外汽车媒体推广方式,企业能够在国际范围内突破边界,获得领域关心。这将帮助企业完成国际化发展发展战略,扩展市场占有率和提升盈利空间。【华媒舍】国外全媒体发表文章将会成为企业完成这一目标的重要方式,为企业带来…

Java中的异常基础知识

目录 什么是异常? 1.算术异常 2.数组越界异常 3.空指针异常 4.输入不匹配异常 Java异常体系 异常的处理 防御式编程: 事后认错 异常处理流程 自定义异常 什么是异常? 在Java中,将程序执行过程中发生的不正常行为称为异常 1.算术异常 public static void main(St…

GDB之保存已经设置的断点(十六)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言: 人生…

postgresql-窗口函数种类

postgresql-聚合窗口函数 聚合函数排名窗口函数案例1案例2 取值窗口函数环比增长率同比增长率 聚合函数 常用的聚合函数,例如 AVG、SUM、COUNT 等,也可以作为窗口函数使用 --计算移动平均值 select saledate, amount, avg(amount) over (order by sale…

【用unity实现100个游戏之10】复刻经典俄罗斯方块游戏

文章目录 前言开始项目网格生成Block方块脚本俄罗斯方块基类,绘制方块形状移动逻辑限制移动自由下落下落后设置对应风格为不可移动类型检查当前方块是否可以向指定方向移动旋转逻辑消除逻辑游戏结束逻辑怪物生成源码参考完结 前言 当今游戏产业中,经典游…

Java替换 html 中隐藏的空格字符

前言 有时候前端传过来的 json 字符串,包含了隐藏的空格 &NBSP 字符,在后端 Debug 的时候可以看到是 ,但 system.out.print() 打印出来的是正常的空格,这样看着正常但其实放入 fastjson 中去做解析会失败,所以我…

U8用友ERP本地部署异地远程访问:内网端口映射外网方案

文章目录 前言1. 服务器本机安装U8并调试设置2. 用友U8借助cpolar实现企业远程办公2.1 在被控端电脑上,点击开始菜单栏,打开设置——系统2.2 找到远程桌面2.3 启用远程桌面 3. 安装cpolar内网穿透3.1 注册cpolar账号3.2 下载cpolar客户端 4. 获取远程桌面…

python使用钉钉机器人给钉钉发送消息

import requestsdef dingmessage(msg):urlhttps://oapi.dingtalk.com/robot/send?access_token2c5e2b764129e936ba9c43713a588caa7eeb168c132223a91ba97d80a6fee337data{msgtype:text,text:{content: 通知:msg}}resrequests.post(url,jsondata)

【数据结构】基于不同策略的英文单词的词频统计和检索系统实验报告

基于不同策略的英文单词的词频统计和检索系统实验报告 实验任务 一篇英文文章存储在一个文本文件中,分别基于线性表、二叉排序树和哈希表不同的存储结构,实现单词词频的统计和单词的检索功能。同时计算不同检索策略下的ASL,通过比较ASL的大小,对不同检索策略的时间性能做出…

界面组件DevExpress WinForms v23.1 - 增强的图表、甘特图功能

DevExpress WinForms拥有180组件和UI库,能为Windows Forms平台创建具有影响力的业务解决方案。DevExpress WinForms能完美构建流畅、美观且易于使用的应用程序,无论是Office风格的界面,还是分析处理大批量的业务数据,它都能轻松胜…

使用sql profile 稳定执行计划的案例

文章目录 1.缘起2.变慢的sql3.检查瓶颈4.解决办法4.1 SQLTXPLAIN 也称为 SQLT4.11 下载coe_xfr_sql_profile.sql4.12 使用方法4.13 执行coe_xfr_sql_profile.sql4.14 执行coe_xfr_sql_profile.sql产生的sql profile文件4.15 验证 4.2 SQL Tuning Advisor方式4.21 第一次Tuning …

冠达管理:Arm上市首日大涨25%,成为年度美股规模最大IPO

9月15日清晨,软银旗下芯片规划公司ARM在纳斯达克交易所首日上市,收盘大涨近25%,市值达到679亿美元,成为本年度美股规模最大的IPO。Arm的美国存托股票开盘价为每股56.1美元,比51美元IPO定价高出10%,随后稳步…

Vue框架中监测数组变化的方法

一 变更方法 调用 push()方法 会直接影响ui变化 <template> <div><ul><li v-for"(item,index) in nums " :key"index"></li></ul> </div> <button click"add">添加数据</button> </…

Talk | ICCV‘23北京通用人工智能研究院黄江勇:ARNOLD-三维场景中基于语言的机器人任务学习

本期为TechBeat人工智能社区第531期线上Talk&#xff01; 北京时间9月14日(周四)20:00&#xff0c; 北京通用人工智能研究院实习研究员—黄江勇的Talk已准时在TechBeat人工智能社区开播&#xff01; 他与大家分享的主题是: “ARNOLD-三维场景中基于语言的机器人任务学习”&…

理解网络通信的基础:OSI七层模型与TCP/IP五层模型

在今天的数字化世界中&#xff0c;网络通信已经成为我们日常生活和商业活动的重要组成部分。为了更好地理解和管理网络通信&#xff0c;网络工程师和管理员使用不同的模型来组织和解释网络协议和通信过程。本文将介绍两种最重要的网络模型&#xff1a;OSI七层模型和TCP/IP五层模…