VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云优惠活动

微信小程序开发的主机环境详解(微信小程序开发环境的构建(详细))

主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

这篇文章给大家带来了一些关于微信小程序的知识,主要是关于主机环境的知识。手机微信是小程序的宿主环境,小程序可以借助宿主环境提供的能力实现许多普通网页无法完成的功能。下面就一起来看看吧,希望能帮到你。

微信小程序开发的主机环境详解(微信小程序开发环境的构建(详细))

【相关学习推荐:小程序学习教程】

小程序的宿主环境微信是小程序的宿主环境。借助主机环境提供的功能,小程序可以实现许多普通网页无法实现的功能。比如小程序调用微信提供的API实现扫码支付等功能。

33.png

沟通模式1。交流的主题

applet中的通信主体是渲染层和逻辑层,其中:

WXML模板和WXSS样式在呈现层中工作。

JS脚本在逻辑层工作。

2.applet的通信模型

applet的通信模型分为两部分:

34.png

渲染层和逻辑层之间的通信

逻辑层和第三方服务器之间的通信

运行机制1。applet的启动过程

将小程序的代码包下载到本地。

解析app.json全局配置文件。

执行App.js Applet条目文件并调用app()创建一个applet实例。

呈现小程序主页

小程序完全启动。

35.png

2.页面呈现的过程

加载。解析页面的json配置文件。

加载。wxml模板和。页面的wxss样式。

执行。js文件并调用Page()来创建页面实例。

页面呈现完成

构成部分1。小程序中组件的分类:

小程序中的组件也由主机环境提供,开发人员可以基于这些组件快速构建漂亮的页面结构。官方将小程序的组件分为9类,即:

查看容器

基本内容

表单组件

导航组件

车身总成

地图地图组件

画布画布组件

开放能力

易接近

2.公共视图容器类组件

视角

正常视图区域

类似于HTML中的div,它是一个块级元素。

常用来实现页面的布局效果。

例如,使用flex实现水平布局。

Wxml代码:

ABCwxss代码:

。container1视图{ width:100px;高度:100pxtext-align:居中;line -高度:100px}。container 1视图:nth -child(1){ background -color:海蓝宝石;}。container 1视图:nth -child(2){ background -color:azure;}。container 1视图:nth -child(3){ background -color:dark orange;}。container 1 { display:flex;justify -内容:space -环绕;}实现效果:

36.png

滚动-视图

可滚动视图区域

常用来实现滚动列表效果。

使用scroll-view实现上下滚动的效果。

Wxml代码:

ABC修改的Wxss代码:

。container1 { border:1px纯红色;身高:110px/*使用scroll-view时设置固定高度*/达到效果:

+9.gif

Swiper和swiper -项目

轮播容器组件和轮播项目组件

使用这两个组件,可以实现轮播效果:

Wxml代码:

A B Cwxss代码:

。swiper -容器{高度:150px}.item{高度:100%;line -高度:150pxtext-align:居中;} swiper -item:nth -child(1)。单品{ background -颜色:海蓝宝石;} swiper -item:nth -child(2)。item{ background-color:天蓝色;} swiper -item:nth -child(3)。item { background -颜色:深橙色;}实现效果:

+10.gif

3.通用基本内容组件

文本

文本组件

类似于HTML中的span标记,它是一个内联元素。

达到长按选择文字内容的效果。

长按选择文字内容:HelloWorld!37.png

rich -文本

富文本组件支持将HTML字符串呈现为WXML结构。

将HTML字符串呈现到相应的UI结构中。

38.png

4.其他常用组件

按钮

按钮组件

功能比HTML中的button按钮更丰富。

open -类型属性可用于调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等。).

图像

图片组件

图像组件的默认宽度约为300像素,高度约为240像素。

领航员

页面导航组件

类似于HTML中的A链接,实现页面跳转。

5.应用程序接口

applet中的API由主机环境提供。通过这些丰富的小程序API,开发者可以方便地调用微信提供的能力,比如实现支付、扫码等功能。

三类小程序API:

事件监控API

特点:从on开始,用于监控某些事件的触发。

例如:wx。onwindowresize(函数回调)监听窗口大小变化的事件。

同步API

特点1:以Sync结尾的API都是同步API。

特点二:同步API的执行结果可以通过函数的返回值直接得到,如果执行中出现错误会抛出异常。

示例:wx . setstoragesync(‘key‘,value)写入本地存储。

异步API

特点:类似于$。jQuery中的Ajax(options)函数需要通过成功、失败和完成来接收调用结果。

示例:wx.request()通过成功回调函数发起网络数据请求并接收数据。

【相关学习推荐:小程序学习教程】

以上是微信小程序开发的主机环境详解。更多资讯请关注主机参考其他相关文章!

这几篇文章你可能也喜欢:

本文由主机参考刊发,转载请注明:微信小程序开发的主机环境详解(微信小程序开发环境的构建(详细)) https://zhujicankao.com/100165.html

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 微信小程序开发的主机环境详解(微信小程序开发环境的构建(详细))
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!