小程序是运行在微信环境中,而网页是运行在浏览器环境中。
由于运行环境不同,所以小程序中,无法调用DOM和BOM的API。
但是,小程序中可以调用微信环境提供的各种API,例如
地理定位,扫码,支付。
网页的开发模式:浏览器+代码编辑器。
而小程序有自己的一套标准开发模式:
登录网址https://mp.weixin.qq.com/,注册一个个人的账号,填写好相关的信息,我们的账号就注册好了。
获取小程序的APPID。在上边的网址完成注册以后,我们在页面中可以找到我们的小程序的APPID展示在如图所示的位置。
微信开发者工具是官方推荐使用的小程序开发工具,它提供的主要功能如下:
推荐下载和安装最新的稳定版微信开发者小工具,链接为:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
1.创建项目文件夹
2.找到开发工具中的+,点击之后选择好项目文件夹,填写刚刚查到的小程序ID,后端服务选择不使用云服务。
3.模板选择JavaScript。
pages用来存放所有小程序的页面。
utils用来存放工具性质的模块。(例如格式化时间的自定义模块)
app.js小程序项目的入口文件。
app.json小程序项目的全局配置文件。
app.wxss是小程序项目的全局样式文件。
project.config.json项目的配置文件。
project.private.config,json项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。
sitemap.json小程序及其页面是否允许被微信索引。
小程序官方建议把所有小程序的页面都存放在pages目录中,以单独的文件夹存在,如下所示
其中,每个页面由四个文件夹组成,他们分别是:
1.项目根目录中的app.json文件
小程序的全局配置文件,包括了小程序的所有页面路径,窗口外观,界面表现,底部tab等。
{
//记录小程序所有页面的路径
"pages":[
"pages/index/index",
"pages/logs/logs"
],
//全局定义小程序所有页面的背景色,文字颜色等
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
//全局定义小程序组件使用的样式版本
"style": "v2",
//指明sitemap.json文件的位置
"sitemapLocation": "sitemap.json"
}
2.project.config.json文件
{
"description": "项目配置文件",
"packOptions": {
"ignore": [],
"include": []
},
"setting": {
"bundle": false,
"userConfirmedBundleSwitch": false,
"urlCheck": true,
"scopeDataCheck": false,
"coverView": true,
"es6": true,
"postcss": true,
"compileHotReLoad": false,
"lazyloadPlaceholderEnable": false,
"preloadBackgroundData": false,
"minified": true,
"autoAudits": false,
"newFeature": false,
"uglifyFileName": false,
"uploadWithSourceMap": true,
"useIsolateContext": true,
"nodeModules": false,
"enhance": true,
"useMultiFrameRuntime": true,
"useApiHook": true,
"useApiHostProcess": true,
"showShadowRootInWxmlPanel": true,
"packNpmManually": false,
"enableEngineNative": false,
"packNpmRelationList": [],
"minifyWXSS": true,
"showES6CompileOption": false,
"minifyWXML": true,
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
}
},
"compileType": "miniprogram",
"libVersion": "2.19.4",
"appid": "wxe68e02c93f4d1613",
"projectname": "miniprogram-92",
"condition": {
},
"editorSetting": {
"tabIndent": "insertSpaces",
"tabSize": 2
}
}
用来记录我们对小程序开发工具所做的个性化配置,例如:
3.sitemap.json文件
{
"desc": "关于本文件的更多信息,请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
"rules": [{
"action": "allow",
"page": "*"
}]
}
微信已开放了小程序内搜索,效果类似于PC网页的SEO,setmap.json文件用来配置小程序页面是否允许微信索引。
当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引,当用户的搜索关键字和页面的索引匹配成功的时候,小程序的页面将可能展示在搜索结果中。
sitemap的索引提示时默认开启的,如需要关闭sitemap的索引提示,可在小程序项目配置文件project.config.json的setting中配置字段checkSiteMap为false。
4.每个页面文件夹的.json文件
小程序的每个页面,都可以使用.json文件来对本页面的窗口外观进行配置,页面中的配置项会覆盖app.json的window中相同的配置项。
只需要在app.json->pages中新增页面的存放路径,小程序开发者工具即可帮助我们自动创建对应的页面文件。其中pages数组中的首位元素是我们的首页。
只要我们去操作pages中的页面路径的前后顺序,即可修改项目的首页。小程序会把排在第一位的页面,当作项目首页进行页面的渲染。
WXML是小程序框架设计的一套标签语言,用来构建小程序页面的结构,其作用类似于网页开发中的HTML。
<a href="#">超链接</a>
<navigator url="/pages/home/home"></navigator>
(WeiXin Style Sheets)是一套样式语言,用于描述WXML组件的样式,类似于网页开发中的CSS。
一个项目仅仅提供页面展示是不够的,在小程序中,我们通过.js文件来处理用户的操作。例如相应用户的点击,获取用户的位置等等。
分为三大类:
宿主环境指的是程序运行时所必需的依赖环境。例如:安卓版的app时不能运行在ios的环境中的,安卓系统就是安卓应用app的宿主环境,相对的ios的应用程序的宿主环境就是ios系统。脱离了宿主环境的软件时没有任何意义的。
手机微信是小程序的宿主环境,小程序借助宿主环境提供的能力,可以完成诸多普通网页无法完成的功能,例如:微信扫码,微信支付,微信登陆,地理定位etc。
1.通信模型
通信的主体:小程序中通信的主体是渲染层和逻辑层。其中WXML和WXSS是工作在渲染层,js脚本工作在逻辑层。
小程序的通信模型:分为两部分。(1).渲染层和逻辑层之间的通信,由微信客户端进行转发;
(2).逻辑层和第三方服务器之间的通信:
由微信客户端进行转发。
2.运行机制
小程序启动的过程:
页面的渲染过程:
3.组件
<view class="container1">
<view>1</view>
<view>2</view>
<view>3</view>
</view>
.WXSS文件内:
/* pages/list/list.wxss */
.container1 view {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1) {
background-color:skyblue;
}
.container1 view:nth-child(2) {
background-color: pink;
}
.container1 view:nth-child(3) {
background-color: gray;
}
.container1 {
display: flex;
justify-content: space-around;
}
scroll-view:可滚动的视图区域,常用来实现滚动列表效果。
要实现如下的效果,拖动1这个元素往下,会依次出现2和3元素:
<scroll-view class="container1" scroll-y>
//scroll-y表示的是纵向的滚动 此时在wxss文件内必须给外部元素添加上强制性的高。如果是scroll-x,则需要加上强制性的宽。
<view>1</view>
<view>2</view>
<view>3</view>
</scroll-view>
/* pages/list/list.wxss */
.container1 view {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1) {
background-color:skyblue;
}
.container1 view:nth-child(2) {
background-color: pink;
}
.container1 view:nth-child(3) {
background-color: gray;
}
.container1 {
border: 1px solid yellowgreen;
width: 100px;
height: 120px;
}
swiper和swiper-item:轮播图容器组件和轮播图item组件。
实现一个简单的轮播图效果:
wxml文件:
<!-- 轮播图的结构 -->
<swiper class="swiper-container">
<!-- 第一个轮播图 -->
<swiper-item>
<view class="item">
1
</view>
</swiper-item>
<!-- 第二个轮播图 -->
<swiper-item>
<view class="item">
2
</view>
</swiper-item>
<!-- 第三个轮播图 -->
<swiper-item>
<view class="item">
3
</view>
</swiper-item>
</swiper>
wxss文件:
.swiper-container {
height: 150px;
}
.item {
width: 100%;
line-height: 150px;
text-align: center;
}
swiper-item:nth-child(1) .item {
background-color:skyblue;
}
swiper-item:nth-child(2) .item {
background-color:pink;
}
swiper-item:nth-child(3) .item {
background-color:yellow;
}
了解一下swiper组件的常用属性:
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
indicator-dots | boolean | false | 是否显示面板指示点 |
indicator-color | color | rgba(0,0,0,.3) | 指示点颜色 |
indicator-active-color | color | #000000 | 当前选中的指示点颜色 |
autoplay | boolean | false | 是否自动切换 |
interval | number | 5000 | 自动切换时间间隔 |
circular | boolean | false | 是否采用衔接滑动 |
常用的基础内容组件:
(1)text
文本组件,类似于HTML中的span标签,是一个行内元素。
基本使用:通过text组建的selectable属性,实现长按选中文本内容的效果。
<view>
手机号支持长按选中效果:
<text user-select>13458674657</text>
</view>
(2)rich-text
富文本组件,支持吧HTML字符串渲染为WXML结构。
基本使用:通过rich-text组件的nodes属性节点,把HTML字符串渲染为对应的UI结构。
<rich-text nodes="<h1 style='color: red;'>标题</h1>"/>
渲染结果如下:
其他常用组件:
(1)button
按钮组件,功能比html中的button更丰富,通过open-type属性可以提供微信调用的各种功能(客服,转发,获取用户授权,获取用户信息等)。
<!-- 通过type属性指定按钮颜色类型 -->
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<!-- size="mini" 小尺寸按钮 -->
<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<!-- plain镂空按钮 -->
<button plain>普通按钮</button>
<button type="primary" plain>主色调按钮</button>
<button type="warn" plain>警告按钮</button>
(2)image
图片组件,默认宽度300px,高度240px。
image组件的mode属性,image的mode属性用来指定图片的裁剪和缩放模式,常用的mode属性值如下:
mode值 | 说明 |
---|---|
scaleToFill | 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 |
aspectFit | 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 |
aspectFill | 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 |
widthFix | 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变 |
heightFix | 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变 |
bottom | 裁剪模式,不缩放图片,只显示图片的底部区域 |
center | 裁剪模式,不缩放图片,只显示图片的中间区域 |
left | 裁剪模式,不缩放图片,只显示图片的左边区域 |
right | 裁剪模式,不缩放图片,只显示图片的右边区域 |
top left | 裁剪模式,不缩放图片,只显示图片的左上边区域 |
top right | 裁剪模式,不缩放图片,只显示图片的右上边区域 |
bottom left | 裁剪模式,不缩放图片,只显示图片的左下边区域 |
bottom right | 裁剪模式,不缩放图片,只显示图片的右下边区域 |
(3)navigator
页面导航组件,类似于html中的a链接。
4.api
(1)小程序API概述
小程序中的API是由宿主环境提供的,通过这些丰富的小程序API,开发者可以方便的调用微信提供的能力,例如:获取用户信息、本地存储、支付功能等。
(2)小程序API三大分类,小程序官方把API分为了如下三大类:
a.事件监听类API:
特点:以on开头,用来监听某些事件的触发。
举例:wx.onWindowsResize(function callback)监听窗口尺寸变化的事件。
b.同步API:
特点1:以sync结尾的API都是同步API。
特点2:同步API的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常。
举例:wx.setStorageSync(‘key’,‘value’)。
c.异步API:
特点:类似jQery中的$.ajax(options)函数,需要通过success,fail,complete接收调用的结果。
举例:wx.request()发起网络数据请求,通过success回调函数接收数据。
在中大型的公司里,人员分工非常的仔细;同一个小程序项目,一般会有不同岗位、不同角色的员工同时参与设计与开发。
此时出于管理的需要,我们迫切需要对不同的岗位、不同角色的员工的权限进行边界的划分,使他们能够高效地进行协同工作。
小程序成员管理体现在管理员对小程序项目成员及体验成员的管理:
(1)项目成员:
(2)体验成员
1.开发者权限:可使用小程序开发者工具及对小程序的功能进行代码开发。
2.体验者权限:可使用体验版小程序。
3.登录权限:可登录小程序管理后台,无需管理员确认。
4.开发设置。
5.腾讯云管理:云开发相关设置
登录小程序后台,即可添加或删除项目成员和体验成员。
手机上打开小程序助手,登录之后即可找到相关的设置页面。
电脑上可以在网页搜索微信公众平台,使用微信扫码登录之后找到如下的页面。在此页面进行成员的添加与删除设置。
在软件开发过程中,根据时间节点的不同,会产生出不同的软件版本,例如:
(1)开发者编写代码的同时,对项目代码进行自测(开发版本)。
(2)直到程序达到一个稳定可体验的状态时,开发者把体验版本给到产品经理和测试人员进行体验测试。
(3)最后修复完程序的bug后,发布正式版供外部用户使用。
一个小程序发布上线,一般要经过上传代码->提交审核->发布这三个步骤。
(1)点击开发者工具顶部工具栏中的“上传按钮”,
(2)填写版本号以及项目备注
登录小程序管理后台->管理->版本管理->开发版本,即可查看刚才提交上传的版本了:
为什么要提交审核:为了保证小程序的质量,以及符合相关的规范,小程序的发布时需要经过腾讯官方的审核的。
审核通过之后,管理员的微信中会收到小程序通过审核的通知,此时在审核版本的列表中,点击“发布"按钮之后,即可把”审核通过“的版本发布为”线上版本“,供所有小程序用户访问和使用。
获取小程序码的5个步骤:
登录小程序管理后台->设置->基本设置->小程序码及线下物料下载。
(1)在小程序后台查看
登录小程序后台,点击侧边栏的统计。
(2)使用”小程序数据助手“查看
打开手机微信,搜索”小程序数据助手“,查看已发布的小程序相关的数据。
文章浏览阅读3k次,点赞3次,收藏13次。root@server ~]# vim /etc/named.rfc1912.zones #添加如下内容,也可直接更改模板。[root@server ~]# vim /etc/named.conf #打开主配置文件,将如下两处地方修改为。注意:ip地址必须反向书写,这里文件名需要和反向解析数据文件名相同。新建或者拷贝一份进行修改。nslookup命令。_dns反向解析
文章浏览阅读2.5w次,点赞16次,收藏103次。这个函数TIM_SetCompare1,这个函数有四个,分别是TIM_SetCompare1,TIM_SetCompare2,TIM_SetCompare3,TIM_SetCompare4。位于CH1那一行的GPIO口使用TIM_SetCompare1这个函数,位于CH2那一行的GPIO口使用TIM_SetCompare2这个函数。使用stm32f103的除了tim6和tim7没有PWM..._tim_setcompare1
文章浏览阅读950次,点赞33次,收藏19次。多线程_进程和线程,并发与并行,线程优先级,守护线程,实现线程的四种方式,线程周期;线程同步,线程中的锁,Lock类,死锁,生产者和消费者案例
文章浏览阅读2.9k次。ifort 编译器的安装ifort 编译器可以在 intel 官网上下载。打开https://software.intel.com/content/www/us/en/develop/tools/oneapi/components/fortran-compiler.html#gs.7iqrsm点击网页中下方处的 Download, 选择 Intel Fortran Compiler Classic and Intel Fortran Compiler(Beta) 下方对应的版本。我选择的是 l_在linux系统的用户目录下安装ifort和mkl库并配置
文章浏览阅读689次,点赞7次,收藏8次。些项目时需要一个生成图片的方法,我在网上找到比较方便且适合我去设置一些样式的生成方式之一就是使用Freemarker,在对应位置上先写好一个html格式的ftl文件,在对应位置用${参数名}填写上。还记得当时为了解决图片大小设置不上,搜索了好久资料,不记得是在哪看到的需要在里面使用width与height直接设置,而我当时用style去设置,怎么都不对。找不到,自己测试链接,准备将所有含有中文的图片链接复制一份,在服务器上存储一份不带中文的文件。突然发现就算无中文,有的链接也是打不开的。_ftl格式pdf的样式调整
文章浏览阅读1.5k次,点赞6次,收藏12次。拉取librealsense。_opt/ros/noetic/lib/nodelet/nodelet: symbol lookup error: /home/admin07/reals
文章浏览阅读3.4k次,点赞3次,收藏29次。一.单选题二.填空题三.判断题一.单选题静态链接是在( )进行的。A、编译某段程序时B、装入某段程序时C、紧凑时D、装入程序之前Pentium处理器(32位)最大可寻址的虚拟存储器地址空间为( )。A、由内存的容量而定B、4GC、2GD、1G分页系统中,主存分配的单位是( )。A、字节B、物理块C、作业D、段在段页式存储管理中,当执行一段程序时,至少访问()次内存。A、1B、2C、3D、4在分段管理中,( )。A、以段为单位分配,每._系统抖动现象的发生由什么引起的
文章浏览阅读2.4k次。在实际的工作生产中,零件的加工制造一般都需要二维工程图来辅助设计。UG NX 的工程图主要是为了满足二维出图需要。在绘制工程图时,需要先确定所绘制图形要表达的内容,然后根据需要并按照视图的选择原则,绘制工程图的主视图、其他视图以及某些特殊视图,最后标注图形的尺寸、技术说明等信息,即可完成工程图的绘制。1.视图选择原则工程图合理的表达方案要综合运用各种表达方法,清晰完整地表达出零件的结构形状,并便于看图。确定工程图表达方案的一般步骤如下:口分析零件结构形状由于零件的结构形状以及加工位置或工作位置的不._ug-nx工程图
文章浏览阅读920次,点赞29次,收藏18次。原文《智能制造数字化工厂智慧供应链大数据解决方案》PPT格式主要从智能制造数字化工厂智慧供应链大数据解决方案框架图、销量预测+S&OP大数据解决方案、计划统筹大数据解决方案、订单履约大数据解决方案、库存周转大数据解决方案、采购及供应商管理大数据模块、智慧工厂大数据解决方案、设备管理大数据解决方案、质量管理大数据解决方案、仓储物流与网络优化大数据解决方案、供应链决策分析大数据解决方案进行建设。适用于售前项目汇报、项目规划、领导汇报。
文章浏览阅读2w次,点赞38次,收藏102次。在服务器端,socket()返回的套接字用于监听(listen)和接受(accept)客户端的连接请求。这个套接字不能用于与客户端之间发送和接收数据。 accept()接受一个客户端的连接请求,并返回一个新的套接字。所谓“新的”就是说这个套接字与socket()返回的用于监听和接受客户端的连接请求的套接字不是同一个套接字。与本次接受的客户端的通信是通过在这个新的套接字上发送和接收数_当在函数 'main' 中调用 'open_socket_accept'时.line: 8. connection request fa
文章浏览阅读4.3k次。对象销毁对象销毁的标准语法Close和Stop何时销毁对象销毁对象时清除字段对象销毁的标准语法Framework在销毁对象的逻辑方面遵循一套规则,这些规则并不限用于.NET Framework或C#语言;这些规则的目的是定义一套便于使用的协议。这些协议如下:一旦销毁,对象不可恢复。对象不能被再次激活,调用对象的方法或者属性抛出ObjectDisposedException异常重复地调用对象的Disposal方法会导致错误如果一个可销毁对象x 包含或包装或处理另外一个可销毁对象y,那么x的Disp_c# 销毁对象及其所有引用
文章浏览阅读1.1w次。这是记录,在中项、高项过程中的错题笔记;https://www.zenwu.site/post/2b6d.html1. 信息系统的规划工具在制订计划时,可以利用PERT图和甘特图;访谈时,可以应用各种调查表和调查提纲;在确定各部门、各层管理人员的需求,梳理流程时,可以采用会谈和正式会议的方法。为把企业组织结构与企业过程联系起来,说明每个过程与组织的联系,指出过程决策人,可以采用建立过程/组织(Process/Organization,P/O)矩阵的方法。例如,一个简单的P/O矩阵示例,其中._大型设备可靠性测试可否拆解为几个部分进行测试