发布时间:2023-12-17 12:00
如果你没有微信公众平台的账号,请先进入微信公众平台首页,点击“立即注册”按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信,我们选择“小程序”即可。
选择注册,填写资料
这里登录你的邮箱看看是否被激活,
前往微信公众平台输入邮箱登录进去,填写个人信息,选择主体“个人类型”,并按要求登记主体信息,主体信息提交后不可更改了。
手机扫码进行管理员身份验证
提交信息
现在你已经可以使用小程序进行开发了。
进入小程序的管理平台了,填写小程序的基本信息,包括名称、图标、描述等,提交完成之后,再添加开发者,开发者默认为管理员,我们可以新增开发者,这里只有管理员才有的权限,然后点击左侧导航栏点击“设置”,找到开发设置,获取小程序的AppID。
下载微信web开发者工具,根据自己的操作系统下载对应的安装包即可。打开开发者工具进行微信扫码登录开发者工具,准备开发自己的小程序吧!!!
打开开发者工具,选择“小程序开发”,点击右下角的“+”新建项目。
选择一个空的文件夹作为项目目录,填入刚刚的AppID,再写一个项目名称,比如我这里叫做 BolgDome,点击“确定”进入工具主界面。
微信小程序的基本文件构造和项目目录结构说明如下:
.
├── 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
根目录下有3个文件:app.is、app.json、app.wxss,小程序必须有这3个描述APP的文件,并放在根目录下。这3个是应用程序级别的文件,与之平行的还有一个pages文件夹,用来存放小程序的各个页面。
我们可以和 web 前端开发技术做个类比:
我们先来看看最终目标和成果,很简单,一共就三页:
在目标成果预览中我们看到,两个页面都有共同的部分 – 页头和页尾。所以在构建页面内容之前,我们先把页头和页尾处理好。我们很容易猜到,这两部分属于小程序的全局配置,因此需要修改 app.json 文件。
最初的内容如下:
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
}
pages 属性用来设置页面路径,它是一个数组,每一项都是字符串来指定小程序由哪些页面组成。数组的第一项代表小程序的初始页面。小程序中新增或减少页面,都需要对pages数组进行修改。
window 属性用于设置小程序的状态栏、导航条、标题、窗口背景色
我们把页头的标题和颜色修改一下,页尾部分我们做一个tab栏来切换页面,这个属件叫做 tabBar,代码如下:
{
"pages":[
"pages/index/index",
"pages/user/user",
"pages/wdbolg/wdbolg",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},"tabBar": {
"color": "#000000",
"selectedColor": "#13b11c",
"backgroundColor": "#FFFFFF",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "images/icon_index.png",
"selectedIconPath": "images/icon_index.png",
"text": "首页"
}, {
"pagePath": "pages/user/user",
"iconPath": "images/icon_user.png",
"selectedIconPath": "images/icon_user.png",
"text": "个人中心"
}, {
"pagePath": "pages/wdbolg/wdbolg",
"iconPath": "images/icon_wdbolg.png",
"selectedIconPath": "images/icon_wdbolg.png",
"text": "我的博客"
}]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
(所用到的图片放在项目的image 目录,你也可以使用自己的图片)
这里用到几个tabBar的属性是color、selectedColor、backgroundColor 和 list,list 是一个数组,主要用于设定导航的路径。CTRL+S保存之后,模拟器就会自动刷新,马上可以看到效果。
pages配置:
要对应你小程序页面,比如“pages/user/user”。
tabBar的用法:
pagePath | 页面的地址,页面的地址粘贴进去即可 |
---|---|
text | 图标下面的字 |
iconPath | 点击前的图标样式 |
selectedIconPathsh | 点击后的图标 |
我的首页是默认的没有改,你们自己去改。
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<block wx:if="{{canIUseOpenData}}">
<view class="userinfo-avatar" bindtap="bindViewTap">
<open-data type="userAvatarUrl"></open-data>
</view>
<open-data type="userNickName"></open-data>
</block>
<block wx:elif="{{!hasUserInfo}}">
<button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
<button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<view wx:else> 请使用1.4.4及以上版本基础库 </view>
</block>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
原来的项目中 pages 目录下只有index和logs 两个目录,因此我们还需要为第二个页面创建一个目录。
创建页面有两种方法:
建议采用第二种方法,修改 app.json 文件:
"pages":[
"pages/index/index",
"pages/user/user",
"pages/wdbolg/wdbolg",
"pages/logs/logs"
]
保存刷新之后就会发现,目录结构里自动创建了这一页。对应的,也要修改 app.json 中的 tabBar 的链接(实际上我们已经做了):
{
"pagePath": "pages/wdbolg/wdbolg",
"iconPath": "images/icon_wdbolg.png",
"selectedIconPath": "images/icon_wdbolg.png",
"text": "我的博客"
}
然后修改wdbolg.wxml设置这一页的标题:
<!--pages/details/details.wxml-->
<view>
<view class='title'>
<text>我的博客</text>
</view>
</view>
修改wdbolg.wxss设置样式:
/* pages/details/details.wxss */
.title {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 40rpx;
margin-bottom: 40rpx;
font-size: 40rpx;
}
这个页面是一个列表展示的页面,我们先在wdbolg.js文件中准备好数据:
/**
* 页面的初始数据
*/
data: {
showModalStatus: false,
list: [{
id: 0,
name : "Vue使用Echarts",
introduce: "一,Echarts一个基于 JavaScript 的开源可视化图表库Echarts官网。",
src: '../../images/user.png',
showModalStatus: false,
catalog: [
{ section: "1. xxx" },
{ section: "2. xxx" },
{ section: "3. xxx" },
{ section: "4. xxx" },
]
},{
id: 1,
name: "SpringBoot+Redis分布式锁",
introduce: "本篇内容主要讲解的是redis分布式锁,下面结合模拟抢单的场景来使用它。",
src: '../../images/user.png',
showModalStatus: false,
catalog: [
{ section: "1. xxx" },
{ section: "2. xxx" },
{ section: "3. xxx" },
{ section: "4. xxx" },
]
}]
},
接下来我们要使用列表渲染 (wx:for) 的方法将这些数据绑定一个数组,并在页面上重复渲染。修改 details.wxml 文件:
<view>
<view wx:for="{{list}}" wx:key="id">
<view class="lesson" id="{{item.id}}">
<image class="lessonPic" mode='aspectFit' src="{{item.src}}"></image>
<view class="lessonName">{{item.name}}</view>
<view class="lessonIntroduce">{{item.introduce}}</view>
</view>
</view>
</view>
默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item。
修改 details.wxss 文件添加样式:
.lesson {
height: 190rpx;
padding-left: 20rpx;
}
.lessonPic {
position: absolute;
height: 150rpx;
width: 150rpx;
}
.lessonName {
position: absolute;
margin-left: 220rpx;
font-size: 35rpx;
}
.lessonIntroduce {
position: absolute;
margin-left: 220rpx;
margin-top: 60rpx;
margin-right: 20rpx;
color: rgb(185, 161, 161);
font-size: 28rpx;
}
好啦,第二页面也完成了。
简单起见,我们就在pages/user/user目录下实现“个人中心”页面好了。双击打开user.wxml,初始内容是没有的。我们可以编写自己的代码,如下:
<view class="view_contain">
<!-- 第一部分 -->
<view class="view_1">
<view class="view_image_text">
<image class="image_radius" src="../../images/user.png" />
<text>张三</text>
</view>
</view>
<!-- 第二部分 -->
<view class="view_3">
<view class="list-item">
<image class="item-image" src="../../image/test5.png"></image>
<text class="item-text">我的收藏</text>
<image class="image-jiantou" src="../../images/jiantou.png"></image>
</view>
<view class="line"></view>
<view class="list-item">
<image class="item-image" src="../../image/test6.png"></image>
<text class="item-text">我的评价</text>
<image class="image-jiantou" src="../../images/jiantou.png"></image>
</view>
<view class="line"></view>
<view class="list-item">
<image class="item-image" src="../../image/test8.png"></image>
<text class="item-text">版本更新</text>
<image class="image-jiantou" src="../../images/jiantou.png"></image>
</view>
<view class="line"></view>
<view class="list-item">
<image class="item-image" src="../../image/test12.png"></image>
<text class="item-text">分享邀请</text>
<image class="image-jiantou" src="../../images/jiantou.png"></image>
</view>
<view class="line"></view>
</view>
</view>
接下来我们来修改一下样式吧:user.wxss里面修改样式
/* 使用page就是为了保证 满屏 */
page {
width: 100%;
height: 100%;
}
.view_contain {
width: 100%;
height: 100%;
background: #f0eeed
}
/* 第一部分 */
.view_1 {
display: flex;
justify-content: center;
width: 100%;
height: 25%;
background: #a0deee;
}
.view_image_text {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.image_radius {
height: 50px;
width: 50px;
border-radius: 30px;
}
/* 第二部分 */
.view_3 {
width: 100%;
height: 50%;
/* background: #f0eeed; */
}
.list-item {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 80rpx;
margin-top: 20rpx;
position: relative; /*父元素位置要设置为相对*/
background: white;
}
.item-image {
width: 50rpx;
height: 50rpx;
margin: 20rpx;
}
.item-text {
color: gray;
font-size: 35rpx;
margin-left: 20rpx;
}
.image-jiantou {
width: 20rpx;
height: 35rpx;
position: absolute; /* 要约束所在位置的子元素的位置要设置成绝对 */
right: 0; /* 靠右调节 */
margin-right: 35rpx;
}
/* 黑线 使得产生阴影效果 */
.line {
width: 100%;
height: 3rpx;
background: lightgray;
margin-left: 90rpx;
}
保存刷新,“个人中心”页面就完成了。
接下来我们要在“我的博客”页面模拟一个弹窗的效果,正常的时候不显示,只有在点击的时候才出现,摁下面的“确定”就会消失。
完了实现这个功能,我们要在组件中绑定一个事件处理函数 bindtap,点击该组件的时候,小程序会在该页面对应的 Page 中找到相应的事件处理函数。
我们先在wdbolg…js 中为每一列数据里引入一个 boolean 变量showModalStatus 来描述对应的弹窗状态,并且初始值为false,表示不显示。同时外层也增加一个初始值为false 的 showModalStatus 变量实现遮罩效果。如下:
data: {
showModalStatus: false,
list: [{
id: 0,
name : "Vue使用Echarts",
introduce: "一,Echarts一个基于 JavaScript 的开源可视化图表库Echarts官网。",
src: '../../images/user.png',
showModalStatus: false,
catalog: [
{ section: "1. xxx" },
{ section: "2. xxx" },
{ section: "3. xxx" },
{ section: "4. xxx" },
]
}]
}
然后在 wdbolg…wxml 中插入弹窗,并用条件渲染(wx:if):来判断是否渲染(显示)弹窗。同时为每一个item添加data-statu来表示弹窗的状态。如下:
<view>
<view wx:for="{{list}}" wx:key="id">
<view class="lesson" bindtap='powerDrawer' data-statu='open' id="{{item.id}}">
<image class="lessonPic" mode='aspectFit' src="{{item.src}}"></image>
<view class="lessonName">{{item.name}}</view>
<view class="lessonIntroduce">{{item.introduce}}</view>
</view>
<!-- 弹窗 -->
<view class='drawer_box' wx:if='{{item.showModalStatus}}' id='{{item.id}}'>
<view class="title">{{item.name}}</view>
<view class='drawer_content'>
<view class='title' wx:for='{{item.catalog}}' wx:for-item='catalog' wx:key='id'>
{{catalog.section}}
</view>
</view>
<!-- 确定按钮 -->
<view class='btn_ok' bindtap='powerDrawer' data-statu='close' id='{{item.id}}'>确定</view>
</view>
</view>
<!-- 遮罩层 -->
<view class='drawer_screen' data-statu='close' wx:if='{{showModalStatus}}'></view>
</view>
在 wdbolg…js 添加 powerDrawer 事件处理,包括显示和关闭事件:
powerDrawer: function (e) {
console.log("clicked");
var currentStatu = e.currentTarget.dataset.statu;
var index = e.currentTarget.id;
// 关闭
if (currentStatu == 'close') {
this.data.list[index].showModalStatus = false;
this.setData({
showModalStatus: false,
list: this.data.list,
});
}
// 显示
if (currentStatu == 'open') {
this.data.list[index].showModalStatus = true;
this.setData({
showModalStatus: true,
list: this.data.list,
});
}
},
最后在wdbolg.wxss设置一下弹窗和遮罩层的样式:
.drawer_box {
width: 650rpx;
overflow: hidden;
position: fixed;
top: 50%;
z-index: 1001;
background: #FAFAFA;
margin: -150px 50rpx 0 50rpx;
}
.drawer_content {
border-top: 1.5px solid #E8E8EA;
height: 210px;
overflow-y: scroll; /* 超出父盒子高度可滚动 */
}
.btn_ok {
padding: 10px;
font: 20px "microsoft yahei";
text-align: center;
border-top: 1.5px solid #E8E8EA;
color: #3CC51F;
}
.drawer_screen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background: black;
opacity: 0.5;
overflow: hidden;
}
OK,模拟弹窗也实现了。
最后一步就是在第一个页面实现图片预览和图片保存的功能,在index.wxml 中为图片添加一个点击事件 previewlmage。
<image class='pic' mode='widthFix' src='../../image/GoZeroWaste.jpg' bindtap='previewImage'></image>
在index.js 中添加 imgalist 项(我们直接把公众号的二维码图片上传到CSDN的图片服务器了),并且实现previewlmage 事件处理。如下:
Page({
data: {
motto: 'Hello World',
company: "wdbolg",
lesson: "我的博客",
position: "垃圾魔法师",
imgalist: ['https://img-blog.csdnimg.cn/20190109104518898.jpg'],
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
previewImage: function (e) {
wx.previewImage({
current: this.data.imgalist, // 当前显示图片的http链接
urls: this.data.imgalist // 需要预览的图片http链接列表
})
},
大功告成,点击开发者工具中的“预览”,使用微信扫描生成的二维码即可在手机端查看。