八分鐘帶你入門微信小程式開發
- 烟雨青岚轉載
- 2020-06-29 11:12:264272瀏覽
註冊微信小程式
#如果你還沒有微信公眾平台的帳號，請先進入微信大眾平台首頁，點選「立即註冊」 按鈕進行註冊。註冊的帳號類型可以是訂閱號碼、服務號碼、小程式以及企業微信，我們選擇 「小程式」 即可。
接著填寫帳號信息，需要注意的是，填寫的郵箱必須是未被微信公眾平台註冊、未被個人微信號綁定的郵箱，而且每個郵箱只能申請一個小程序。
啟動信箱之後，選擇主體類型為 “個人類型”，並依要求登記主體資訊。主體資訊提交後不可修改，該主體將成為你使用微信公眾平台各項服務與功能的唯一法律主體與締約主體，在後續開通其他業務功能時不得變更或修改。
一切 OK 就可以直接進入小程式的管理平台了。如果直接跳轉失敗，也可以從微信公眾平台手動登入。填寫小程式的基本訊息，包括姓名、圖示、描述等。提交成功之後，再新增開發者。開發者預設為管理員，我們也可以從這裡新增綁定開發者，這是管理員才有權限的操作。
然後在左側導覽列點擊 “設定”，找到開發設置，以獲得小程式的 AppID。
微信開發者工具
下載微信web開發者工具，根據自己的作業系統下載對應的安裝包進行安裝即可。
開啟開發者工具，用微信掃碼登入開發者工具，準備開發你的第一個小程式吧！
第一個小程式
新專案
開啟開發者工具，選擇“小程式專案”，點擊右下角的“ ” 新建專案.
選擇空的資料夾作為專案目錄，填入剛剛的 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
根目錄下有3個檔案：app.js、app.json、app.wxss，小程式必須有這3個描述APP 的文件，並放在根目錄下。這3個是應用程式層級的文件，與之平行的還有一個 pages 資料夾，用來存放小程式的各個頁面。
我們可以和web 前端開發技術做個類比：
- wxml 類似於HTML 文件，用來寫頁面的標籤和骨架，但裡面只能用小程式自己封裝的元件；
- wxss 類似CSS 文件，用來寫頁面樣式，只是把css 檔案換成了wxss 檔案；
- js 檔案類似前端程式設計中的JavaScript 文件，用來寫小程式的頁面邏輯；
- json 檔案用來配置頁面的樣式和行為。
目標成果
我們先來看看最終的目標和成果，很簡單，一共兩頁：
# （為了讓廣大程式設計師也能保護環境、熱愛生活，我特意選了「零垃圾生活」 主題來做Demo）
步驟分解
Demo 代碼下載：https:// gitee.com/luhuadong/Web_Learning/tree/master/WeChat/GoZeroWaster
分解目標成果：
- 個人中心
- 生活指南
- 模擬彈窗
- #預覽圖片
頁頭頁尾
在目標成果預覽中我們看到，兩個頁面都有共同的部分－ 頁頭和頁尾。所以在建立頁面內容之前，我們先把頁頭和頁尾處理好。我們很容易猜到，這兩部分屬於小程式的全域配置，因此需要修改 app.json 檔案。
最初的內容如下：
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "balack"
}
}
pages 屬性用來設定頁面路徑，它是一個數組，每一項都是字串來指定小程式由哪些頁面組成。數組的第一項代表小程式的初始頁面。小程式中新增或減少頁面，都需要對 pages 陣列進行修改。
window 屬性用於設定小程式的狀態列、導覽列、標題、視窗背景色。
我們把頁頭的標題和顏色修改一下，頁尾部分我們做一個tab 欄來切換頁面，這個屬性叫做tabBar，程式碼如下：
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#2f2f8f",
"navigationBarTitleText": "GoZeroWaste",
"navigationBarTextStyle":"white"
},
"tabBar":{
"color": "#bfc1ab",
"selectedColor": "#13b11c",
"backgroundColor": "#1f1f4f",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "image/icon_component.png",
"selectedIconPath": "image/icon_component_HL.png",
"text": "个人中心"
},
{
"pagePath": "pages/details/details",
"iconPath": "image/icon_API.png",
"selectedIconPath": "image/icon_API_HL.png",
"text": "生活指南"
}
]
}}
（所用到的圖片放在專案的image 目錄，你也可以使用自己的圖片）
這裡用到幾個tabBar 的屬性是color、selectedColor、backgroundColor 和list，list 是一個數組，主要用於設定導航的路徑。
CTRL S 儲存之後，模擬器就會自動刷新，馬上可以看到效果。
个人中心
简单起见，我们就在 pages/index 目录下实现 “个人中心” 页面好了。双击打开 index.wxml，初始内容如下：
<!--index.wxml-->
<view>
<view>
<button> 获取头像昵称 </button>
<block>
<image></image>
<text>{{userInfo.nickName}}</text>
</block>
</view>
<view>
<text>{{motto}}</text>
</view>
</view>
这里已经有一些代码了，虽然现在可能还看不懂，但我们知道，这就是现在页面的源代码。我们把 “Hello World” 部分注释掉，增加我们希望显示的内容：
<!--index.wxml--><view>
<view>
<button> 获取头像昵称 </button>
<block>
<image></image>
<text>{{userInfo.nickName}}</text>
</block>
</view>
<!-- <view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view> -->
<view>
<view>
<text>{{company}}</text>
</view>
<view>
<text>{{position}}</text>
</view>
<view>
<text>{{lesson}}</text>
</view>
</view></view>
这里分别使用 {{company}}、{{position}} 和 {{lesson}} 作为占位符，用法类似于 Django 的模板语言。当然也可以直接用相应的字符来替换它，只不过我们想沿用 {{motto}} 的做法，让你知道在哪里修改这些数据。没错，就是在 index.js 文件：
Page({
data: {
motto: 'Hello World',
company: "GoZeroWaste",
lesson: "21天零垃圾生活指南",
position: "垃圾魔法师",
/* ... */
}
wxml 文件中的 <view></view> 组件类似于网页开发中的 <p></p>，而 <text></text> 组件是用来写文本的，需要注意的是 <text></text> 组件内只支持 <text></text> 嵌套。当然，可用用 <image></image> 插入图片，图片要保存到 image 目录，否则在测试的时候是无法上传的。
<view>
<!-- 省略 -->
<view>
<text>{{lesson}}</text>
</view>
<view>
<image></image>
</view>
</view>
mode=‘widthFix’ 表示以宽度不变，高度自动变化，保持原图宽高比不变的方式进行缩放以适应屏幕大小。
接下来还需要修改 index.wxss 文件来设置样式：
/**index.wxss**/.userinfo {
display: flex;
flex-direction: column;
align-items: center;}.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;}.userinfo-nickname {
color: #aaa;}.usermotto {
margin-top: 200px;}.ID_Badge {
padding-top: 20rpx;
color: blue;}.ID_info {
display: flex;
flex-direction: column;
align-items: center;}.pics {
width: 400rpx;}
保存刷新，“个人中心” 页面就完成了。
生活指南
原来的项目中 pages 目录下只有 index 和 logs 两个目录，因此我们还需要为第二个页面创建一个目录。
创建页面有两种方法：
- 在目录结构的 pages 图表上，新建目录，然后在目录下逐一创建页面构成文件
- 在 app.json 下，直接添加
建议采用第二种方法，修改 app.json 文件：
{
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/details/details"
]
保存刷新之后就会发现，目录结构里自动创建了这一页。对应的，也要修改 app.json 中的 tabBar 的链接（实际上我们已经做了）：
{
"pagePath": "pages/details/details",
"iconPath": "image/icon_API.png",
"selectedIconPath": "image/icon_API_HL.png",
"text": "生活指南"
}
然后修改 details.wxml 设置这一页的标题：
<!--pages/details/details.wxml--> <view> <view> <text>21天零垃圾生活指南</text> </view> </view>
修改 details.wxss 设置样式：
/* pages/details/details.wxss */
.title {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 40rpx;
margin-bottom: 40rpx;
font-size: 40rpx;
}
这个页面是一个列表展示的页面，我们先在 details.js 文件中准备好数据：
// pages/details/details.jsPage({
/**
* 页面的初始数据
*/
data: {
showModalStatus: false,
list: [
{
id: 0,
name : "写一篇《垃圾日记》",
introduce: "零垃圾并不是一项宏大的工程，而是由日常生活中一个个小小的习惯和选择组成的。最难的，是迈出第一步。",
src: '../../image/day01.jpg',
showModalStatus: false,
catalog: [
{ section: "1. xxx" },
{ section: "2. xxx" },
{ section: "3. xxx" },
{ section: "4. xxx" },
]
},
{
id: 1,
name: "带上自己的购物袋",
introduce: "在我们家，当时垃圾桶里最多的就是塑料袋，而这些袋子跟着我回家后，都几乎难逃被丢进垃圾桶的命运。",
src: '../../image/day02.jpg',
showModalStatus: false,
catalog: [
{ section: "1. xxx" },
{ section: "2. xxx" },
{ section: "3. xxx" },
{ section: "4. xxx" },
]
},
/* 省略 */
]
}
接下来我们要使用列表渲染（wx:for）的方法将这些数据绑定一个数组，并在页面上重复渲染。修改 details.wxml 文件：
<view>
<view>
<view>
<image></image>
<view>{{item.name}}</view>
<view>{{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;
}
好啦，第二个页面也完成了。
模拟弹窗
接下来我们要在 “生活指南” 页面模拟一个弹窗的效果，正常的时候不显示，只有在点击的时候才出现，摁下面的 “确定” 就会消失。
完了实现这个功能，我们要在组件中绑定一个事件处理函数 bindtap，点击该组件的时候，小程序会在该页面对应的 Page 中找到相应的事件处理函数。
我们先在 details.js 中为每一列数据里引入一个 boolean 变量 showModalStatus 来描述对应的弹窗状态，并且初始值为 false，表示不显示。同时外层也增加一个初始值为 false 的 showModalStatus 变量实现遮罩效果。如下：
data: {
showModalStatus: false,
list: [
{
id: 0,
name : "写一篇《垃圾日记》",
introduce: "零垃圾并不是一项宏大的工程，而是由日常生活中一个个小小的习惯和选择组成的。最难的，是迈出第一步。",
src: '../../image/day01.jpg',
showModalStatus: false,
catalog: [
{ section: "1. xxx" },
{ section: "2. xxx" },
{ section: "3. xxx" },
{ section: "4. xxx" },
]
}
然后在 details.wxml 中插入弹窗，并用条件渲染（wx:if）来判断是否渲染（显示）弹窗。同时为每一个 item 添加 data-statu 来表示弹窗的状态。如下：
<view>
<view>
<view>
<image></image>
<view>{{item.name}}</view>
<view>{{item.introduce}}</view>
</view>
<!-- 弹窗 -->
<view>
<view>{{item.name}}</view>
<view>
<view>
{{catalog.section}} </view>
</view>
<!-- 确定按钮 -->
<view>确定</view>
</view>
</view>
<!-- 遮罩层 -->
<view></view>
</view>
在 details.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,
});
}
},
最后在 details.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 中为图片添加一个点击事件 previewImage。
<image></image>
在 index.js 中添加 imgalist 项（我们直接把公众号的二维码图片上传到 CSDN 的图片服务器了），并且实现 previewImage 事件处理。如下：
Page({
data: {
motto: 'Hello World',
company: "GoZeroWaste",
lesson: "21天零垃圾生活指南",
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链接列表
})
},
大功告成，点击开发者工具中的 “预览”，使用微信扫描生成的二维码即可在手机端查看。
教程就到这里，希望大家可以对微信小程序有所了解。
本文转自：https://luhuadong.blog.csdn.net/article/details/86181251
推荐教程：《微信小程序》
以上是八分鐘帶你入門微信小程式開發的詳細內容。更多資訊請關注PHP中文網其他相關文章！