可以使用手机微信扫描下小程序码
使用浏览器打开:微信小程序 (qq.com)网站,点击立即注册
即可进入到小程序开发账号的注册流程中
在创建小程序项目的时候,需要使用到此AppID,不要外露
微信开发者工具
是微信官方推荐使用的小程序开发工具,主要提供如下几个功能:
官方下载地址:微信小程序 开发工具包下载 (ionic.wang)
根据电脑的系统版本来进行下载,安装步骤点击下一步(可以修改安装目录)完成安装
在上面的界面中有一个+号就是添加项目的意思
想要看到预览的方式有两种:
- 点击
编译
,在左边就是显示的小程序编译后的效果- 点击预览,出现二维码手机微信扫描即可
pages:用来存放所有小程序的页面
app.js:小程序项目的入口文件
app.json:小程序项目的全局配置文件
小程序官网建议把所有的小程序页面,都存放在pages目录中,以单独的文件夹存在,如下index文件所示(每个页面由4个基本文件组成)
json是一种数据格式,在实际的开发中,JSON总是以
配置文件
的形式出现。小程序项目中也不例外:通过不同的.json配置文件,可以对小程序项目进行不同级别的配置
小程序中由4种json配置文件:分别是:
app.json
配置文件app.json是当前小程序的全局配置,包括了小程序的所有页面路径、窗口外观、界面表现、底部tab等
,如下是创建第一个小程序的app.json文件
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
配置的作用:
新建小程序页面,只需要在app.json -> pages中添加新增页面的存放路径,小程序开发根绝即可帮我们
自动创建
对应的页面文件,如下所示:
只需要调整app.json -> pages数组中的页面路径的前后顺序,即可完成修改项目的首页。小程序会把排在第一位的也买你当作项目的首页进行渲染
project.config.json
配置文件用来记录我们对小程序来发工具所做的个性化配置(初略介绍)
- setting:中保存了编译项目的配置
- projectname:中保存的是项目的名称
- appid:中保存的是小程序账号ID
微信现已开放小程序内搜索
,效果类型与PC网页的SEO关键字,sitemap.json文件用来配置小程序页面是否允许微信索引
当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候,小程序的页面将可能展示在微信的搜索结果中。
将allow改为disallow将不被微信索引
{
"desc": "关于本文件的更多信息,请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
"rules": [{
"action": "allow",
"page": "*"
}]
}
注意:sitemap的索引提示是默认开启的,如果需要guanbisitemap的索引提示,可以在小程序的项目配置文件
project.config.json的setting中配置的字段checkSiteMap修改为false
,设置为false就不会由下面的黄色提示
小程序的每一个页面,可以使用.json文件夹对本页面的窗口外观进行配置,页面中配置的项会覆盖app.json的window中相同的配置项
是小程序框架设计的一套
标签语言
,用来构建小程序页面的结构,其作用类似于页面开发中的HTML
标签不同(如下标签对比)
属性节点不同
HTML标签:
a标签
WXML标签
提供了类似Vue中的模板语法
WXSS是一套样式语言
,用于描述WXML的组件样式,类似于网页开发中的CSS
一个项目仅仅提供界面展示是不够的,在小程序中,我们通过.js文件来处理用户的操作。
例如:响应用户的点击、获取用户的地理位置等
app.js
是整个小程序项目的入口函数,通过调用
App()函数
来启动整个小程序
页面的.js文件
是页面的入口文件,通过调用
Page()函数
来创建并运行页面
普通的.js文件
是普通的功能模块文件,用来封装
公共的行数或属性
供页面使用
宿主环境指的是
程序运行所必须依赖的环境
,例如:安卓和IOS手机系统Android系统和ISO系统是两个不同的宿主环境,安装版的微信APP不可以运行在ISO环境中
脱离了宿主环境的软件是没有任何意义的
手机微信是小程序的宿主环境
小程序借助宿主环境提供的能力
,可以完成许多普通页面无法完成的功能,例如:
微信扫码、微信支付……
小程序中通信的主体是
渲染层
和逻辑层
,其中:
- WXML模板和WXSS样式工作在渲染层
- JS脚本工作在逻辑层
小程序的通信模型分为两部分:
渲染层和逻辑层之间的通信
由微信客户端进行转发
逻辑层和第三方服务器之间的通信
由微信客户端进行转发
小程序中的组件也是由宿主环境提供的
,开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序分为了9大类,分别是:
view
基本使用方法
实现如图的flex横向布局效果:
list.wxml文件
<view class="container1">
<view>Aview>
<view>Bview>
<view>cview>
view>
list.wxss样式文件
/* pages/list/list.wxss */
.container1 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100PX;
}
.container1 view:nth-child(1){
background-color: lightgreen;
}
.container1 view:nth-child(2){
background-color: red;
}
.container1 view:nth-child(3){
background-color: lightskyblue;
}
.container1{
display: flex;
justify-content: space-around;
}
scroll-view
基本使用
list.wxml代码(需要使用专属标签包裹)
<scroll-view class="container1" scroll-y>
<view>Aview>
<view>Bview>
<view>cview>
scroll-view>
list.wxss样式文件(使用上面的对外围进行修改接口)
.container1{
border: 1px solid red;
width: 100px;
height: 200px;
}
swiper和swiper-item
轮播图的基本使用
list.wxml文件
<swiper class="swiper-container">
<swiper-item>
<view class="item">Aview>
swiper-item>
<swiper-item>
<view class="item">Bview>
swiper-item>
<swiper-item>
<view class="item">Cview>
swiper-item>
swiper>
list.wxss样式文件
.swiper-container{
height: 150px;
}
.item{
height: 100%;
line-height: 150px;
text-align: center;
}
swiper-item:nth-child(1) .item{
background-color: lightgreen;
}
swiper-item:nth-child(2) .item{
background-color: red;
}
swiper-item:nth-child(3) .item{
background-color: lightseagreen;
}
swiper组件的常用元素
都是在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 | 是否采用衔接滑动 |
text组件的基本使用
通过text组件的
selectable
属性,实现长按选中文本内容的效果(拷贝)
<view>
手机号支持长按选中效果:
<text selectable>13850124545text>
view>
通过rich-text组件的nodes
属性节点,把HTML字符串渲染为对应的UI结构
<rich-text nodes=" style='color:red;'>标题1</h1>">
rich-text>
button
open-type
属性可以调用微信提供的各种功能(客服、转发、获取用户授权、用户信息等)基本使用
<view>-----------通过type属性指定按钮颜色类型----------view>
<button>普通按钮button>
<button type="primary">主调按钮button>
<button type="warn">警告按钮button>
<view>--------------size="mini"小尺寸按钮---------------view>
<button size="mini">默认按钮button>
<button type="primary" size="mini">主调按钮button>
<button type="warn" size="mini">警告按钮button>
<view>-------------------plain镂空按钮--------------------view>
<button size="mini" plain>默认按钮button>
<button type="primary" size="mini" plain>主调按钮button>
<button type="warn" size="mini" plain>警告按钮button>
image
基本使用
<image>image>
<image src="https://www.keaidian.com/uploads/allimg/190424/24110307_8.jpg">image>
list.wxss样式文件
image{
border: 1px solid lime;
}
image组件的mode属性用来指定图片的裁剪
和缩放
模式,常见的属性有如下:
mode值 | 说明 |
---|---|
scaleToFill | (默认)缩放模式,不保持纵横比例缩放图片 ,使用图片的宽高完全拉伸至填充满image元素 |
aspectFit | 缩放模式,保存纵横比例缩放图片,使图片的长边能完全显示出来 ,也就是说,可以完整的将图片显示出来 |
aspectFill | 缩放模式,保存纵横比例缩放图片,只保证图片的短边能完全显示出来 。也就是:图片通常只在水平或垂直向是完整的,另一个方向将会放生截取 |
widthFix | 缩放模式,宽度不变,高度自动变化 ,保存原图宽高比不变 |
heightFix | 缩放模式,高度不变,宽度自动变化 ,保存原图宽高比不变 |
navigator
小程序中的API是由宿主环境提供的,通过这些丰富的小程序API,开发者可以方便的调用微信提供的能力
例如:获取用户信息,本地存储等
监听某事件的触发
同一个小程序项目,一般会有不同的岗位,不同角色的员工同时参与设计与开发
我们需要对不同需求岗位的员工角色进行
权限边界的划分
,使他们能够高效的进行协同工作
小程序成员管理提现在管理员
对小程序项目成员
级体验成员
的管理
需要登录小程序的管理后台
搜索添加成员
版本阶段 | 说明 |
---|---|
开发版本 | 使用开发者工具,可将代码上传到开发版本中。开发版本只保留每人最新的一份上传的代码。点击提交审核,可将代码提交审核。开发版本可删除,不影响线上版本和审核中版本的代码。 |
体验版本 | 可以选择某个开发版本作为体验版,并且选取一份体验版。 |
审核中的版本 | 只能有一份代码处于审核中。有审核结果后可以发布到线上,也可直接重新提交审核,覆盖原审核版本。 |
线上版本 | 线上所有用户使用的代码版本,该版本代码在新版本代码发布后被覆盖更新。 |
上传代码 ——》 提交审核 ——》发布
点击开发者工具的右上角的
上传
按钮,完成上传代码的版本号和项目备注即可
提交审核
完成相关的信息填写,就可以提交到腾讯官方进行审核了审核通过后,管理员的微信会接受到小程序通过审核的通知,此时在审核版本的列表中,点击发布
按钮之后,即可把审核通过
的版本发布为线上版本
,供所有小程序用户访问和使用