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

别急,我教你怎么写微信小程序(怎么自己写微信小程序)。

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

微信小程序开发专栏今天详细教你写微信小程序。别急,我教你怎么写微信小程序(怎么自己写微信小程序)。

小程序的历史什么是微信小程序?微信小程序,简称小程序。英文名mini program,是一款不需要下载安装就可以直接使用的应用。他实现了他触手可及的梦想。用户可以通过扫描或搜索直接打开应用程序。

为什么微信小程序微信有大量用户推广app或者微信官方账号开发适配成本太高,容易小范围试错,然后快速迭代跨平台历史?2016年1月11日张小龙,微信内部研究了一个新的形式,应用号,后来改名为小程序。2016年8月12日开始内测,2017年1月9日上线#环保规范。

注册账户

Mp.weixin.qq.com/(账户信息---邮箱激活---信息注册)

获取id

APPID(" class = " lazy load " src = "//p3-juejin . byte img . com/tos -cn-i-k3 u1fbpfcp/25d 7088598 ce 45 B3 a 304 a 999018 C1 Fe 9 ~ TPL v-k3 u1fbpfcp -zoom -1 . image " data -width = " 800 " data -style = " max -width:90% "/>

开发者工具

微信开发者工具下载

applet开发工具简介开发工具

快捷键:

1.ctrl+shift+F(搜索)2。alt+shift+F(代码格式---VSCode)复制代码img src=" class = " lazy load " src = "//p3-Jue Jin . byte img . com/tos -cn-i-k3u 1。6e 8 eee 16d 0 ca 4 e 529 f 078 e 6 ef 2 b 553 e 9 ~ TPL v-k 3u 1 fbpfcp -zoom -1 . image " data -width = " 800 " data -style = " max -width:90% "/>

小程序的原生框架。

小程序配置文件(在微信开发者工具里写配置文件,有提示)app.json全局配置文件。

配置全局文件*页面:添加要创建的文件项,文件* " class = " lazy load " src = "//p3-Jue Jin . byte img . com/tos -cn-i-k 3u 1 FB pfcp/920738 a3 ebb 54 b 7 aae 722 ee 957 f 01039 ~ TPL v-k 3u 1 FB pfcp -zoom -1 . image " data -width = " 800 " data -style = " max -width:90% "/>

* " class = " lazy load " src = "//p3-Jue Jin . byte img . com/tos-cn-i-k 3u 1 FB pfcp/4e4e 475460 ba 4a a3 b 039 a57c 34700913 ~ TPL v-k 3u 1 FB pfcp -zoom -1 . image " data -width = " 800 " data -style = " max -width:90% "/>

Page.json页面配置文件

网站地图

applet WXML ---> HTML的模板语法(结合基本组件、事件系统和组件形成页面结构)

相当于,内嵌标签,不换行,相当于,块级元素,换行数据绑定{{data}}

运算-->表达式(数值计算、字符串串联、三元表达式)

列表循环(wx:for)

Wx:key绑定数组中的唯一属性,wx:key =这表示该数组是一个公共数组,而“this”是一个循环项。

& lt视图& gt索引:{{ index }}名称:{{item。name } } 占位符标签

条件渲染(wx: if) (wx: if,wx: elif,wx: else)(隐藏属性通过添加样式来呈现)。

当标签不经常切换到使用if时,它经常切换到使用hidden。

事件绑定关键字:bind (bindinput,bindtap [Click Event])

获取事件源对象的值:

E.detail.value复制代码以获取数据中数据的值:

this.data.property名称的复制代码将事件源对象的值设置回this.data:

this . setdata({ num:this . data . num+operation });复制代码事件绑定不能直接传递参数,需要通过自定义属性传递参数({ {传递的参数}}):

& ltbutton & gt+& lt;/button & gt;bandlet AP(e){//console . log(e);const operation = e . current target . dataset . operation;this . setdata({ num:this . data . num+operation });},屏幕宽度等于750px时复制代码样式尺寸单位,1px = 1rpx。

当屏幕宽度等于375像素时,1px =0.5rpx

样式导入只支持相对路径选择器(微信小程序不支持通配符)。applet的内置组件是applet中常见的布局组件:

视图、文本、rich -文本、按钮、图像、图标、游标、单选按钮、复选框等。复制代码视图标签相当于p标签。

文本标签只能与文本标签嵌套。长按文字复制【可选】(只有这个标签有这个功能),回车和空格都可以编码。

图片标签(打包上线尺寸不能超过2M,使用图片时统一使用外网图片)。

图片具有默认的宽度和高度(320px * 240px)。

模式决定修改图片内容和图片标签。

scaleToFill的默认值不保持纵横比,而是拉伸到标签定义的宽度和高度。

AspectFit保持长宽比,保证图片的长边完整显示(常用的carousel)。

AspectFill短边完全显示

WidthFix宽度不变,高度自动变化,保持原来的宽高比不变。

顶部、左侧、底部、右侧背景图像定位

小程序中的图片直接支持懒加载。

Lazy-load会自己判断,当图片出现在视口的上下屏幕时,会自己开始加载图片。

Swiper Label ---"旋转地图

滑动高度=滑动宽度*图片高度/原始图片宽度。

& ltswiper & gt//图片的默认宽度和高度为320 * 240

& lt导航器& gt& lt/navigator & gt;复制代码rich-text(富文本标签,将一个字符串解析成相应的标签,相当于v-html)。

// 1标签字符串< rich -text & gt;& lt/rich -text & gt;// 2对象数组;& lt/rich -text & gt;复制代码按钮按钮

大小(mini/default)、颜色(type:default/primary/warn)、是否为普通、是否在文本之前加载、是否为opentype。

Opentype:

Concat直接打开客服对话功能,需要在小程序后台配置。

将小程序的appid从测试号改为自己的appid,登录微信小程序官网,添加客服-微信分享即可将当前小程序转发给微信好友,无法将小程序转发到朋友圈。

GetPhoneNumber获取当前用户的手机号码,结合事件使用。并不是企业的小程序账号没有权限获取用户的手机号。

GetUserInfo获取用户的个人信息。

LaunchApp直接在小程序中打开应用。

OpenSetting打开applet内置的授权页面。

只有用户点击的权限才会出现。

反馈打开小程序的内置反馈页面。

图标

类型:键入success、success _ no _ circle、info、warn、watching。success _ no _ circle,info,warn,waiting,cancel,downkload,search,clear。

尺码:尺码$ number/串

颜色:彩色

无线电收音机盒

& ltradio -group & gt;& lt收音机& gt男性</radio & gt;& lt收音机& gt女性</radio & gt;& lt/radio -group & gt;& lt视图& gt选定的有:{ { gender } } </view & gt;数据:{性别:& quot"},handleChange(e) {//获取单选框中选择的值value let gender = e.detail.value//在数据}复制代码复选框中给数据this.setData({ gender //等价于gender: gender})赋值。

& lt复选框-组& gt& lt复选框& gt{ { item.name } } & lt/checkbox & gt;& lt/checkbox -group & gt;& lt视图& gt选定的有:{ { checked list } } </view & gt;选中列表:

在vscode中安装easy less插件在这里插入图片描述Configure(ctrl+shift+p然后输入设置,然后添加以下配置):

"less.compile&quot:{ & quot出口& quot:& quot。wxss & quot}复制代码微信app下载微信app下载微信是一款支持通过手机网络发送语音消息、视频、图片、文字的手机通讯软件。微信可以单独聊天,也可以群聊,根据地理位置找到附近的人,带给你全新的移动通信体验。快来拯救下载体验给有需要的朋友吧!

下载

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

本文由主机参考刊发,转载请注明:别急,我教你怎么写微信小程序(怎么自己写微信小程序)。 https://zhujicankao.com/121078.html

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

评论 抢沙发

评论前必须登录!