装饰设计网站模板,各个广告联盟的标识,中国互联网金融公司排名,上海专业网站建设市场微信小程序
一、微信小程序的简介#xff1a;
小程序的介绍#xff1a;
微信小程序#xff1a;是一种全新的连接用户与服务的方式#xff0c;它可以在微信内被便捷地获取和传播#xff0c;可以理解为使用微信平台开发的app。小程序是混合开发模式的一种具体实现。通过w…微信小程序
一、微信小程序的简介
小程序的介绍
微信小程序是一种全新的连接用户与服务的方式它可以在微信内被便捷地获取和传播可以理解为使用微信平台开发的app。小程序是混合开发模式的一种具体实现。通过wxml类似与H5与wxss类似于css构建页面的渲染。通过逻辑控制层类似于vue中的view-model控制数据逻辑。底层通过封装实现了硬件设备调用例如wifi、蓝牙等。提供了微信登录、离线缓存等通用接口。
小程序与普通网页开发的区别
小程序的主要开发语言是 JavaScript 小程序的开发同普通的网页开发相比有很大的相似性。对于前端开发者而言从网页开发迁移到小程序的开发成本并不高但是二者还是有些许区别的。
网页开发渲染线程和脚本线程是互斥的这也是为什么长时间的脚本运行可能会导致页面失去响应而在小程序中二者是分开的分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API进行 DOM 选中和操作。而如上文所述小程序的逻辑层和渲染层是分开的逻辑层运行在 JSCore 中并没有一个完整浏览器对象因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库例如 jQuery、 Zepto 等在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同所以一些 NPM 的包在小程序中也是无法运行的。
网页开发者需要面对的环境是各式各样的浏览器PC 端需要面对 IE、Chrome、QQ浏览器等在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端以及用于辅助开发的小程序开发者工具小程序中三大运行环境也是有所区别的。
小程序的运行环境(图1) 网页开发者在开发网页的时候只需要使用到浏览器并且搭配上一些辅助工具或者编辑器即可。小程序的开发则有所不同需要经过申请小程序账号、安装小程序开发者工具、配置项目等等过程方可完成。
二、微信小程序的发布流程
注册申请账号
进入小程序注册页 根据指引填写信息和提交相应的资料就可以拥有自己的小程序账号。 再输入完邮箱和密码后会跳转到邮箱激活确认的页面 点击登录邮箱进入登录界面会弹出邮箱给的地址 点击发送的链接进入界面 最后一步就是信息登记根据工作的需求来选择主题类型。 在这块输入自己的身份信息然后进行短信验证。 点击完继续后会跳转到开发管理的这个页面然后在点击开发设置就会看到自己的开发者ID。属于自己的一个AppID
一般在写项目的时候会首先选择测试号在等项目上线的时候我们再去填写一个注册时候的AppID这样就可以按需上线。
在这个小程序管理平台你可以管理你的小程序的权限查看数据报表发布小程序等操作。
登录 小程序后台 我们可以在菜单 “开发”-“开发设置” 看到小程序的 AppID 了 。 小程序的 AppID 相当于小程序平台的一个身份证后续你会在很多地方要用到 AppID 注意这里要区别于服务号或订阅号的 AppID。
有了小程序账号之后我们需要一个工具来开发小程序。
安装开发工具
前往 开发者工具下载页面 根据自己的操作系统下载对应的安装包进行安装 这里的话就是根据自己的一个需求去下载一个微信开发者工具来编写属于自己的小程序这里的话我自己下载的稳点版相对于其他两个来说把他们两个中存在的缺陷在这个稳定版中也全都得到了改善。
三、创建第一个小程序
新建项目
打开开发者工具然后选择“小程序项目”点击右下角的“”新建项目。选择一个空的文件夹作为项目目录填入刚刚的 AppID再填写一个项目名称比如我这里叫做GoZeroWaster。点击“确定”进入工具主界面。
项目目录结构 . ├── app.js # 小程序的逻辑文件 ├── app.json # 小程序的配置文件 ├── app.wxss # 全局公共样式文件 ├── pages # 存放小程序的各个页面 │ ├── index # index页面 │ │ ├── index.js # 页面逻辑 │ │ ├── index.wxml # 页面结构 │ │ └── index.wxss # 页面样式表 │ └── logs # logs页面 │ ├── logs.js # 页面逻辑 │ ├── logs.json # 页面配置 │ ├── logs.wxml # 页面结构 │ └── logs.wxss # 页面样式表 ├── project.config.json └── utils └── util.js
根目录下有三个文件分别是app.js、app.json、app.wxss小程序必须有这三个描述APP的文件并且必须放在根目录下。这三个是应用程序级别的文件和他平行的还有一个pages文件夹用来存放小程序的各个页面。
可以和web前端开发技术做个类比
wxml相当于HTML文件用来编写页面的标签和整体的结构但是里面只能用小程序自己封装的组件wxss相当于CSS文件用来写页面的样式只是把CSS文件换成了wxss文件js文件相当于前端编程中的 JavaScript 文件用来写小程序的页面逻辑json文件用来配置页面的样式和行为
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成必须放在项目的根目录如下 一个小程序页面由四个文件组成分别是 下面是一个微信开发者工具界面图我们先来认识一下主题的页面(图2) 页面介绍 项目组成 给小程序新增一个页面 测试号申请我们小程序账号申请完成之后建议务必要申请一个测试号用来开发,在点击测试号的时候会自动生成一个AppID这个ID自己无法更改。测试号和我们刚刚上面注册的正式号不一样 测试号登录成功后只显示你的一些信息 这个就是创建完之后出现这个页面。
进入app.json 在第一个pages数组里面指定生成页面文件路径即可生动创建
注想要哪一个页面先展示可按顺序排即可第一个页面路径就是第一个显示的页面 给小程序当前页面设置局部配置 当局部样式和全局样式冲突根据就近原则局部样式会覆盖全局样式 当局部样式的权重大于等于全局样式的权重时才会覆盖全局的样式 页面配置和全局配置的关系 小程序中app.json中的window节点可以全局配置小程序中每个页面的窗口表现。 如果某些小程序页面想要拥有特殊的窗口表现此时”页面级别的.json配置问价“就可以实现这种需求。 注意当页面配置和全局配置冲突时根据就近原则最终的效果是以页面配置为准 页面配置中常用的配置项 和全局配置一样
完整的代码如下
{usingComponents: {},navigationBarBackgroundColor: #000000,navigationBarTextStyle: white,navigationBarTitleText: 第一个小程序项目,backgroundColor: #eeeeee,backgroundTextStyle: light
}四、微信开发者工具组件
小程序中的组件也是由宿主环境提供的开发者可以基于组件快速搭建出漂亮的页面结构。
Vant Weapp的引入 初始化 进入项目输入cmd,j进入后输入npm init -y 安装通过 npm 安装 npm i vant/weapp -S --production删除stylev2 删除style:v2修改project.config.jspackNpmManually改为 TRUE 添加对象 点击工具构建npm ,构建成功会出现 入组件使用组件 tab底部栏 引入,在app.json或index.json中引入组件 usingComponents: {van-tab: vant/weapp/tab/index,van-tabs: vant/weapp/tabs/index
}使用插件.通过active设定当前激活标签对应的索引值默认情况下启用第一个标签 van-tabs activeavan-tab title标签 1 namea内容 1/van-tabvan-tab title标签 2 nameb内容 2/van-tabvan-tab title标签 3 namec内容 3/van-tab
/van-tabs官方把小程序的组件分为了9大类 1.视图容器 2.基础内容 3.表单组件 4.导航组件 5.媒体组件 6.地图组件 7.画布组件 8.开放能力 9.无障碍访问现只举例部分常用组件大部分可以看官方文档组件部分不再做过多赘述。
自适应单位rpx
大家应该注意到了在hello.wxss样式表里绝大多数长度单位都设置的是rpx这个全新的单位。比如设置图片大小的时候。 要透彻的了解rpx这个单位还需要对移动端的分辨率有一定的了解比如物理分辨率px和逻辑分辨率pt等概念。简单的说rpx将随着屏幕尺寸的变换而变换但px不会。这里我们只需要记住如下的结论
在iPhone6的宽度750个物理像素作为标准来做设计图1物理像素1rpx0.5px
比如在iPhone6宽度750物理像素下要显示一张宽和高都是200像素*200像素的图片就要把图片的高度和宽度都设置为200rpx或者100px 这时候在iphone6上的显示的效果都是一样的但是我们换到其他机型的时候就会出现差异。因为rpx将随着屏幕尺寸的变换而变换但px不会改变大小。
视图容器
1. view 组件
在小程序中,通常使用view/代替div/作为容器来做布局
!--pages/welcome/welcome.wxml--
view classcontainerimage classavatar src/images/测试.jpg/imagetextHello/text!-- button微信小程序/button --viewtext微信小程序/text/view
/view2. scroll-view组件
可滚动视图区域。使用竖向滚动时需要给scroll-view一个固定高度通过 WXSS 设置 height。组件属性的长度单位默认为px2.4.0起支持传入单位(rpx/px)。
横向滚动需打开 enable-flex 以兼容 WebView如 滚动条的长度是预估的若直接子节点的高度差别较大则滚动条长度可能会不准确
通用属性 示例代码
view classcontainerview classpage-bodyview classpage-sectionview classpage-section-titletextVertical Scroll\n纵向滚动/text/viewview classpage-section-spacingscroll-view scroll-ytrue styleheight: 300rpx; bindscrolltoupperupper bindscrolltolowerlower bindscrollscroll scroll-into-view{{toView}} scroll-top{{scrollTop}}view iddemo1 classscroll-view-item demo-text-1/viewview iddemo2 classscroll-view-item demo-text-2/viewview iddemo3 classscroll-view-item demo-text-3/view/scroll-view/view/viewview classpage-sectionview classpage-section-titletextHorizontal Scroll\n横向滚动/text/viewview classpage-section-spacingscroll-view classscroll-view_H scroll-xtrue bindscrollscroll stylewidth: 100%view iddemo1 classscroll-view-item_H demo-text-1/viewview iddemo2 classscroll-view-item_H demo-text-2/viewview iddemo3 classscroll-view-item_H demo-text-3/view/scroll-view/view/view/view
/view.page-section-spacing{margin-top: 60rpx;
}
.scroll-view_H{white-space: nowrap;
}
.scroll-view-item{height: 300rpx;
}
.scroll-view-item_H{display: inline-block;width: 100%;height: 300rpx;
}const order [demo1, demo2, demo3]Page({onShareAppMessage() {return {title: scroll-view,path: page/component/pages/scroll-view/scroll-view}},data: {toView: green},upper(e) {console.log(e)},lower(e) {console.log(e)},scroll(e) {console.log(e)},scrollToTop() {this.setAction({scrollTop: 0})},tap() {for (let i 0; i order.length; i) {if (order[i] this.data.toView) {this.setData({toView: order[i 1],scrollTop: (i 1) * 200})break}}},tapMove() {this.setData({scrollTop: this.data.scrollTop 10})}
})实现的效果图 基础内容
1. text 组件
1是一个⽂本标签
2只能嵌套text
3⻓按⽂字可以复制只有该标签有这个功能–selectable
4 可以对如: 空格回车 进⾏编码 --decode 列通过 text 组件的user-select 属性可以实现长按选中文本内容的效果。
view
长按可以选中文本内容:
text user-selectHelloWorld!/text
/view效果图 2. progress 组件
进度条。组件属性的长度单位默认为px2.4.0起支持传入单位(rpx/px)。
实例代码
view classprogress-boxprogress percent20 show-info stroke-width3/
/viewview classprogress-boxprogress percent40 active stroke-width3 /icon classprogress-cancel typecancel/icon
/viewview classprogress-boxprogress percent60 active stroke-width3 /
/viewview classprogress-boxprogress percent80 color#10AEFF active stroke-width3 /
/view效果图 3. icon组件
图标组件
以下是一个属性说明 代码实列
view classcontainerview classicon-boxicon classicon-box-img typesuccess size93/iconview classicon-box-ctnview classicon-box-title成功/viewview classicon-box-desc用于表示操作顺利完成/view/view/viewview classicon-boxicon classicon-box-img typeinfo size93/iconview classicon-box-ctnview classicon-box-title提示/viewview classicon-box-desc用于表示信息提示也常用于缺乏条件的操作拦截提示用户所需信息/view/view/viewview classicon-boxicon classicon-box-img typewarn size93 color#C9C9C9/iconview classicon-box-ctnview classicon-box-title普通警告/viewview classicon-box-desc用于表示操作后将引起一定后果的情况也用于表示由于系统原因而造成的负向结果/view/view/viewview classicon-boxicon classicon-box-img typewarn size93/iconview classicon-box-ctnview classicon-box-title强烈警告/viewview classicon-box-desc用于表示由于用户原因造成的负向结果也用于表示操作后将引起不可挽回的严重后果的情况/view/view/viewview classicon-boxicon classicon-box-img typewaiting size93/iconview classicon-box-ctnview classicon-box-title等待/viewview classicon-box-desc用于表示等待告知用户结果需等待/view/view/viewview classicon-boxview classicon-small-wrpicon classicon-small typesuccess_no_circle size23/icon/viewview classicon-box-ctnview classicon-box-title多选控件图标_已选择/viewview classicon-box-desc用于多选控件中表示已选择该项目/view/view/viewview classicon-boxview classicon-small-wrpicon classicon-small typecircle size23/icon/viewview classicon-box-ctnview classicon-box-title多选控件图标_未选择/viewview classicon-box-desc用于多选控件中表示该项目可被选择但还未选择/view/view/viewview classicon-boxview classicon-small-wrpicon classicon-small typewarn size23/icon/viewview classicon-box-ctnview classicon-box-title错误提示/viewview classicon-box-desc用于在表单中表示出现错误/view/view/viewview classicon-boxview classicon-small-wrpicon classicon-small typesuccess size23/icon/viewview classicon-box-ctnview classicon-box-title单选控件图标_已选择/viewview classicon-box-desc用于单选控件中表示已选择该项目/view/view/viewview classicon-boxview classicon-small-wrpicon classicon-small typedownload size23/icon/viewview classicon-box-ctnview classicon-box-title下载/viewview classicon-box-desc用于表示可下载/view/view/viewview classicon-boxview classicon-small-wrpicon classicon-small typeinfo_circle size23/icon/viewview classicon-box-ctnview classicon-box-title提示/viewview classicon-box-desc用于在表单中表示有信息提示/view/view/viewview classicon-boxview classicon-small-wrpicon classicon-small typecancel size23/icon/viewview classicon-box-ctnview classicon-box-title停止或关闭/viewview classicon-box-desc用于在表单中表示关闭或停止/view/view/viewview classicon-boxview classicon-small-wrpicon classicon-small typesearch size14/icon/viewview classicon-box-ctnview classicon-box-title搜索/viewview classicon-box-desc用于搜索控件中表示可搜索/view/view/view/view媒体组件
1. image 组件
1 图⽚标签image组件默认宽度320px、⾼度240px,所以如果不进行宽高设置,不会进行自适应
2 ⽀持懒加载 3 mode模式列举: 代码实列
view classpageview classpage__hdtext classpage__titleimage/texttext classpage__desc图片/text/viewview classpage__bdview classsection section_gap wx:for{{array}} wx:for-itemitemview classsection__title{{item.text}}/viewview classsection__ctnimage stylewidth: 200px; height: 200px; background-color: #eeeeee; mode{{item.mode}} src{{src}}/image/view/view/view
/viewPage({data: {array: [{mode: scaleToFill,text: scaleToFill不保持纵横比缩放图片使图片完全适应}, {mode: aspectFit,text: aspectFit保持纵横比缩放图片使图片的长边能完全显示出来}, {mode: aspectFill,text: aspectFill保持纵横比缩放图片只保证图片的短边能完全显示出来}, {mode: top,text: top不缩放图片只显示图片的顶部区域}, {mode: bottom,text: bottom不缩放图片只显示图片的底部区域}, {mode: center,text: center不缩放图片只显示图片的中间区域}, {mode: left,text: left不缩放图片只显示图片的左边区域}, {mode: right,text: right不缩放图片只显示图片的右边边区域}, {mode: top left,text: top left不缩放图片只显示图片的左上边区域}, {mode: top right,text: top right不缩放图片只显示图片的右上边区域}, {mode: bottom left,text: bottom left不缩放图片只显示图片的左下边区域}, {mode: bottom right,text: bottom right不缩放图片只显示图片的右下边区域}],src: https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg},imageError: function(e) {console.log(image3发生error事件携带值为, e.detail.errMsg)}
})以上代码可以实现图片的插入。
表单组件
1. button 组件
小程序中的按钮组件类似于HTML中的按钮组件同时可以调用微信提供的丰富的功能例如获取用户信息获取用户授权转发等。
例使用type属性设置按钮的类型
button 默认按钮/button
button typeprimary主色调按钮/button
button typewarn警告按钮/button效果图 例使用size属性设置按钮的大小
button sizemini默认按钮/button
button typeprimary sizemini主色调按钮/button
button typewarn sizemini警告按钮/button效果图 例使用plain属性设置镂空按钮
button plain默认按钮/button
button typeprimary plain主色调按钮/button
button typewarn plain警告按钮/button效果图
