微信小程序的基础 （一）

微信小程序介绍- 链接

微信小程序，简称小程序，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用

1. 为什么是微信小程序?

  1. 微信有海量用户，而且粘性很高，在微信里开发产品更容易触达用户。
  2. 推广app 或公众号的成本太高。
  3. 开发适配成本低。
  4. 容易小规模试错，然后快速迭代。
  5. 跨平台。

2. 微信小程序历史

  • 2016年1月11日，微信之父张小龙时隔多年的公开亮相，解读了微信的四大价值观。张小龙指出，越来越多产品通过公众号来做，因为这里开发、获取用户和传播成本更低。拆分出来的服务号并没有提供更好的服务，所以微信内部正在研究新的形态，叫**「微信小程序」** 需要注意的是，之前是叫做 应用号
  • 2016年9月21日，微信小程序正式开启内测。在微信生态下，触手可及、用完即走的微信小程序引起广泛关注。腾讯云正式上线微信小程序解决方案，提供小程序在云端服务器的技术方案。
  • 2017年1月9日，微信推出的“小程序”正式上线。“小程序”是一种无需安装，即可使用的手机“应用”。不需要像往常一样下载App，用户在微信中“用完即走”。

3. 疯狂的微信小程序

  1. 微信月活已经达到10.82亿。其中55岁以上的用户也达到6300万
  2. 信息传达数达到450亿
  3. 小程序覆盖超过200+行业，交易额增长超过6倍，服务1000亿+人次,创造出了5000亿+的商业价值

4. 还有其他的小程序

  1. 支付宝小程序22
  2. 百度小程序
  3. QQ小程序
  4. 今日头条 + 抖音小程序

5.官方微信小程序体验

小程序示例源码
在这里插入图片描述

2准备

1. 注册账号

  • 建议使用全新的邮箱，没有注册过其他小程序或者公众号的。

  • 访问注册页面，耐心完成注册即可。

2. 获取APPID

  • 由于后期调用微信小程序的接口等功能，需要索取开发者的小程序中的APPID，所以在注册成功后，可登录，然后获取APPID。

  • 登录，成功后 开发 => 开发设置 => 获取 AppID

3. 开发工具

  • 下载地址

  • 微信小程序自带开发者工具，集 开发 预览 调试 发布 于一身的 完整环境。
    在这里插入图片描述

第一个微信小程序

####1. 打开微信开发者工具

  • 注意 第一次登录的时候 需要扫码登录

在这里插入图片描述

2. 新建小程序项目

在这里插入图片描述

3. 填写项目信息

在这里插入图片描述

微信开发者工具介绍

在这里插入图片描述

小程序结构目录

1. 小程序文件结构和传统web对比

结构传统web微信小程序
结构HTMLWXML
样式CSSWXSS
逻辑JavascriptJavascript
配置无JSON
  • 通过以上对比得出，传统web 是三层结构。而微信小程序 是四层结构，多了一层 配置.json

####2. 基本的项目目录

在这里插入图片描述

小程序配置文件

  • 一个小程序应用程序会包括最基本的两种配置文件。一种是全局的 app.json 和 页面自己的 page.json

  • 注意：配置文件中不能出现注释

1. 全局配置 app.json

  • app.json配置

  • app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

{"pages":["pages/index/index","pages/logs/logs"],"window":{"navigationBarBackgroundColor": "#f00", "navigationBarTextStyle" : "black",     "navigationBarTitleText": "小马哥","navigationStyle" : "default","backgroundColor" : "#0f0","backgroundTextStyle" : "dark","enablePullDownRefresh" : false,"backgroundColorTop" : "#00f", // 窗口顶部背景  真机调试 仅ios "backgroundColorBottom" : "#f00", // 窗口底部背景 真机调试 仅ios "pageOrientation": "auto"}
}

字段的含义

  1. pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
  2. window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
  3. tabBar字段 – 详见底部 tab 栏

####2. 页面配置 page.json

  • page.json

  • 这里的 app.json 其实用来表示该小程序页面相关的配置

  • 页面的配置只能设置 app.json 中部分 window 配置项的内容, 页面中配置会覆盖 app.json 的 window 中相同的配置项

属性类型默认值描述
navigationBarBackgroundColorHexColor#000000导航栏背景颜色，如 #000000
navigationBarTextStyleStringwhite导航栏标题颜色，仅支持 black / white
navigationBarTitleTextString导航栏标题文字内容
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStyleStringdark下拉 loading 的样式，仅支持 dark / light
enablePullDownRefreshBooleanfalse是否全局开启下拉刷新。 详见 Page.onPullDownRefresh
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离，单位为px。 详见 Page.onReachBottom
disableScrollBooleanfalse设置为 true 则页面整体不能上下滚动；只在页面配置中有效，无法在 app.json 中设置该项 (备:类似overflow:hidden)

学小程序

  • 组件
  • api

常见组件

重点讲解小程序中常用的布局组件

view,text,rich-text,button,image,navigator,icon,swiper,radio,checkbox。等

1. view

  • 视图容器 - 相当于之前的 div
  • 属性 :
    • hover-class 指定按下去的样式类
<view hover-class="h-class">点击我试试
</view>

2. text

  • 文本标签 - 相当于之前 span
  • 特殊用法 :
    • 长按文字可以复制 (只有该标签有这个功能)
      • 设置true 才可以选择, 手机预览测试效果
    • 可以对空格 回车 进行编码
属性名类型默认值说明
selectableBooleanfalse文本是否可选
decodeBooleanfalse是否解码
  • 代码
//1.1 不可以选择
<text>测试选择</text>
//1.2 可以选择 (手机测试)
<text selectable='{{ true }}'>测试选择</text>//2.1 显示空格失败 : 结果 => 姓&nbsp;名
<text>姓&nbsp;名</text>
//2.2 显示空格成功 : 结果 => 姓 名
<text decode'>姓&nbsp;名</text>//3 其他几个格式 -- 看图
<text decode>正&ensp;正@</text>
<text decode>正&emsp;正</text>
<text decode>正&nbsp;正</text>
  • 使用场景
<view><text decode="{{ true }}">姓&emsp;名</text>
</view>
<view><text>产品名</text>
</view>

在这里插入图片描述

3. icon

  • 图标组件
属性类型默认值必填说明
typestring是icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
sizenumber/string23否icon的大小
colorstring否icon的颜色，同css的color
  • 代码
  <icon type="success" size="40" color="red"/>

4. radio

  • 单选框

在这里插入图片描述

  • 需要 搭配 radio-group 一起使用
<radio-group > <radio>男</radio><radio>女</radio>
</radio-group>

5. checkbox

  • 多选框
    在这里插入图片描述

  • 需要 搭配 checkbox-group 一起使用

<checkbox-group><checkbox>前端</checkbox><checkbox>java</checkbox>
</checkbox-group>

6. image

  • 图标标签
    • image 组件默认宽高 320*240
  • 属性
属性名类型默认值说明
srcString图片资源地址
modeString‘scaleToFill’图片裁剪、缩放的模式
lazy-loadBooleanfalse图片懒加载

mode 有效值：

值说明
scaleToFill缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

使用场景

  • scaleToFill : 盒子尺寸和图片尺寸大小一样, 使用该模式
  • aspectFit : 详情页顶部显示图片 (右)
  • aspectFill : 列表item 使用该模式 (左)
//链接
<view><image mode="aspectFit"  src="http://img2.imgtn.bdimg.com/it/u=1668465722,3535501153&fm=214&gp=0.jpg"></image>
</view>
<view><image mode="aspectFit"  src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1018718673,2637294948&fm=26&gp=0.jpg"></image>
</view>

在这里插入图片描述

7. swiper

  • 轮播图组件

  • 默认宽度 100% 高度 150px

属性名类型默认值说明
indicator-dotsBooleanfalse是否显示面板指示点
indicator-colorColorrgba(0, 0, 0, .3)指示点颜色
indicator-active-colorColor#000000当前选中的指示点颜色
autoplayBooleanfalse是否自动播放
intervalNumber5000自动切换时间间隔
circularBooleanfalse是否循环轮播

  • swiper

    • 滑块视图容器

  • swiper-item

    • 滑块

  • 打开淘宝使用 : m.taobao.com

8. navigator

  • 导航组件 类似超链接标签
属性名类型默认值说明
targetStringself在哪个目标上发生跳转，默认当前小程序，可选值self/miniProgram
urlString当前小程序内的跳转链接
open-typeStringnavigate跳转方式

open-type 有效值：

值说明
navigate保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面
redirect关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。
switchTab跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch关闭所有页面，打开到应用内的某个页面
navigateBack关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
exit退出小程序，target="miniProgram"时生效

​

9. rich-text

  • 富文本标签

    • 可以将html字符串解析成 对应标签，类似 vue中 v-html功能

  • 通过nodes属性来实现

    1. 接收标签字符串
    2. 接收对象数组

nodes属性

nodes属性支持 字符串 和 标签节点数组

属性说明类型必填备注
name标签名string是支持部分受信任的 HTML 节点
attrs属性object否支持部分受信任的属性，遵循 Pascal 命名法
children子节点列表array否结构和 nodes 一致

文本节点：type = 'text’

属性说明类型必填备注
text文本string是支持entities
  • 代码
    // 标签字符串str :'<div style="color:red;" >呵呵</div>',// 对象数组str1 : [{name:'div',attrs:{style:"color:red;"},children : [{type:'text',text:'哈哈'}]}]// 使用
<rich-text nodes='{{ str1 }}'></rich-text>

10. button

在这里插入图片描述

<buttontype="default"size="{{defaultSize}}"loading="{{loading}}"plain="{{plain}}"
>default
</button>
属性类型默认值必填说明
sizestringdefault否按钮的大小
typestringdefault否按钮的样式类型
plainbooleanfalse否按钮是否镂空，背景色透明
disabledbooleanfalse否是否禁用
loadingbooleanfalse否名称前是否带 loading 图标
form-typestring否用于form组件，点击分别会触发 form 组件的 submit/reset 事件
open-typestring否微信开放能力

size 的合法值

值说明
default默认大小
mini小尺寸

type 的合法值

值说明
primary绿色
default白色
warn红色

form-type 的合法值

值说明
submit提交表单
reset重置表单
<form bindsubmit="handle"><input name='n1'></input><input name='n2'></input><button form-type="submit">重置</button><button form-type="reset">重置</button>
</form>

open-type 的合法值

值说明
contact打开客服会话，需要在微信小程序的后台配置 (演示不了)
share触发用户转发，
getPhoneNumber获取用户手机号，不是企业的小程序账号 没有权限来获取用户的手机号码 (演示不了)
getUserInfo获取用户信息，可以从bindgetuserinfo回调中获取到用户信息
launchApp打开APP 需要配合原生app (演示不了)
openSetting打开授权设置页
feedback打开“意见反馈”页面，需要真机调试

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

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

相关文章

看YYModel源码的一些收获

看YYModel源码的一些收获

关于源码学习自己的一些感悟第一层&#xff1a;熟练使用&#xff1b;第二层&#xff1a;读懂代码&#xff1b;第三层&#xff1a;通晓原理&#xff1b;第四层&#xff1a;如何设计&#xff1b;自己学到了什么&#xff0c;还留有什么问题&#xff1b;关于分享关于线下演讲分享和…
阅读更多...
IDEA提交项目到SVN

IDEA提交项目到SVN

一.提交步骤 VCS--Enable...-->点击项目右键-->subversion-->share directory-->commit 二.IDEA SVN 忽略文件的设置 1》share .使用idea在将项目提交到svn的过程中遇到这样的问题 将项目share之后再设置ignore files &#xff0c;在commit的时候&#xff0c;不会将…
阅读更多...
小程序基础 （二）

小程序基础 （二）

小程序开发框架 小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。 整个小程序框架系统分为两部分&#xff1a;逻辑层&#xff08;App Service&#xff09;和 视图层&#xff08;View&#xff09;。 小程序提供了自己的视…
阅读更多...
项目ITP(五) spring4.0 整合 Quartz 实现任务调度

项目ITP(五) spring4.0 整合 Quartz 实现任务调度

版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主同意不得转载。https://blog.csdn.net/u010378410/article/details/26016025 2014-05-16 22:51 by Jeff Li 前言 系列文章&#xff1a;[传送门] 项目需求&#xff1a; 二维码推送到一体机上&#xff0c;给学生签到扫…
阅读更多...
喜欢用Block的值得注意-Block的Retain Cycle的解决方法

喜欢用Block的值得注意-Block的Retain Cycle的解决方法

本文不讲block如何声明及使用&#xff0c;只讲block在使用过程中暂时遇到及带来的隐性危险。 主要基于两点进行演示&#xff1a; 1.block 的循环引用(retain cycle) 2.去除block产生的告警时&#xff0c;需注意问题。 有一次&#xff0c;朋友问我当一个对象中的block块中的访问…
阅读更多...
小程序基础 （三）

小程序基础 （三）

5. 使用 slot 使用单个slot // 页面 <Test><view>自定义内容</view> </Test>// 组件 <view><view>前面的内容</view><slot></slot><view>后面的内容</view> </view>使用多个slot - 具名 // 页面 &…
阅读更多...
【PyQt5】QT designer + eclipse 集成开发

【PyQt5】QT designer + eclipse 集成开发

【写在前面的话】 考虑将pyqt5的界面开发qt designer 集成在eclipse中&#xff0c;并且&#xff0c;不利用cmd命令行进行转换。 【工具】 1、pyqt5 2、qt designer 3、eclipse pydy 【步骤】 1、首先配置Qt designer。 菜单 run-->external Tools-->External tools confi…
阅读更多...
iOS UIlabel文字排版（改变字间距行间距）分类

iOS UIlabel文字排版（改变字间距行间距）分类

在iOS开发中经常会用到UIlabel来展示一些文字性的内容&#xff0c;但是默认的文字排版会觉得有些挤&#xff0c;为了更美观也更易于阅读我们可以通过某些方法将UIlabel的行间距和字间距按照需要调节。 比如一个Label的默认间距效果是这样&#xff1a; 然后用一个封装起来的Cat…
阅读更多...
MySQL查询之聚合查询

MySQL查询之聚合查询

为了快速得到统计数据&#xff0c;提供了5个聚合函数&#xff1a; count(*)表示计算总行数&#xff0c;括号中写星与列名&#xff0c;结果是相同的 查询学生总数 select count(*) from students; max(列)表示求此列的最大值 查询女生的编号最大值 select max(id) from students…
阅读更多...
React基础学习（第一天）

React基础学习（第一天）

React 概述 : React 是一个用于 构建用户界面 的 JavaScript 库因为框架是有一整套解决方案的&#xff0c;React就是纯粹写UI组件的 没有什么异步处理机制、模块化、表单验证这些。React和react-router, react-redux结合起来才叫框架&#xff0c;而React本身只是充当一个前端…
阅读更多...
iOS 富文本风格NSMutableParagraphStyle、定制UITextView插入图片和定制复制

iOS 富文本风格NSMutableParagraphStyle、定制UITextView插入图片和定制复制

问题一 开发过程中&#xff0c;经常会遇到动态计算行高的问题&#xff0c; - (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)options attributes:(nullableNSDictionary<NSString *, id> *)attributes context:(nullable NSStringDrawingC…
阅读更多...
day24 01 初识继承

day24 01 初识继承

day24 01 初识继承 面向对象的三大特性&#xff1a;继承&#xff0c;多态&#xff0c;封装 一、继承的概念 继承&#xff1a;是一种创建新类的方式&#xff0c;新建的类可以继承一个或者多个父类&#xff0c;父类又可称基类或超类&#xff0c;新建的类称为派生类或者子类 class…
阅读更多...
React基础学习（第二天）

React基础学习（第二天）

虚拟DOM JSX 涉及到 虚拟DOM ,简单聊一下 定时器渲染问题 // 方法 function render() {//2. 创建react对象let el (<div><h3>时间更新</h3><p>{ new Date().toLocaleTimeString()}</p></div>)//3. 渲染ReactDOM.render(el, document.g…
阅读更多...
iOS 去除字符串中的空格或多余空格（适合英文单词）

iOS 去除字符串中的空格或多余空格（适合英文单词）

NSString -stringByTrimmingCharactersInSet: 是个你需要牢牢记住的方法。它经常会传入 NSCharacterSet whitespaceCharacterSet 或 whitespaceAndNewlineCharacterSet 来删除输入字符串的头尾的空白符号。 需要重点注意的是&#xff0c;这个方法 仅仅 去除了 开头 和 结尾 的…
阅读更多...
华为交换机在Telnet登录下自动显示接口信息

华为交换机在Telnet登录下自动显示接口信息

因为用console连接交换机&#xff0c;默认是自动显示接口信息的&#xff0c;比如down掉一个接口后&#xff0c;会自动弹出接口被down掉的信息&#xff0c;但是在telnet连接下&#xff0c;默认是不显示这些信息的&#xff0c;需要开启后才可显示。 1、首先开启info-center(默认是…
阅读更多...
React基础学习（第三天）

React基础学习（第三天）

条件渲染 1. if / else render () {if (this.state.isLoading) { // 正在加载中return <h1>Loading...</h1>}return <div>这就是我们想要的内容</div>} // 钩子函数 五秒钟之后 修改状态值componentDidMount () { setTimeout(() > {this.setState(…
阅读更多...
componentsJoinedByString 和 componentsSeparatedByString 的方法的区别

componentsJoinedByString 和 componentsSeparatedByString 的方法的区别

将string字符串转换为array数组 NSArray *array [Str componentsSeparatedByString:","]; &#xff1d;&#xff1d;反向方法 将array数组转换为string字符串 NSString *tempString [mutableArray componentsJoinedByString:","];--,是分隔符 可不加分隔…
阅读更多...
java中的各种数据类型在内存中存储的方式

java中的各种数据类型在内存中存储的方式

转载别人的附上链接&#xff1a;https://blog.csdn.net/zj15527620802/article/details/80622314 1.java是如何管理内存的 java的内存管理就是对象的分配和释放问题。&#xff08;其中包括两部分&#xff09; 分配&#xff1a;内存的分配是由程序完成的&#xff0c;程序员需要通…
阅读更多...
vscode的 jsonp 配置文件

vscode的 jsonp 配置文件

{ // 工具-字体大小 “editor.fontSize”: 15, // 工具-tab缩进 “editor.tabSize”: 2, // 工具-在视区宽度换行 “editor.wordWrap”: “on”, // 工具-缩放 “window.zoomLevel”: 1, // 工具-编写tab识别语言格式 “emmet.includeLanguages”: { “vue-html”: “html”, “…
阅读更多...
NSString拼接字符串和NSPredicate详解

NSString拼接字符串和NSPredicate详解

NSString* string; // 结果字符串 02 NSString* string1, string2; //已存在的字符串&#xff0c;需要将string1和string2连接起来 03 04 //方法1. 05 string [[NSString alloc]initWithFormat:"%,%", string1, string2 ]; 06 07 //方法2. 08 string [string1 …
阅读更多...
最新文章

Copyright @ 2022~2023