零基础微信小程序开发心得----注册微信小程序

因为项目需要用到小程序,自己想写个从零到有的微信小程序专题,记录学习心得。

1.微信小程序简介

2.注册小程序

3.安装开发工具

4.小程序初始化目录介绍

1.微信小程序简介

微信小程序这个词可以分解为“微信”和“小程序”两部分

(1),其中“微信”可以理解为“微信中的”，指的是小程序的执行环境；当然微信在提供执行环境的同时也延长了用户使用微信的时间。

(2),“小程序”是说它首先是程序，然后具备轻便的特征。小程序并不像其他应用那样，它不需要安装，而是通过扫描二维码等打开后直接执行；用完以后也不需要卸载。这就是所谓用完即走的原则。

2.注册小程序

在创建小程序之前,首先需要注册小程序账号

用没有注册过微信公众平台的邮箱注册一个微信公众号

3.安装开发工具

第一步：下载微信小程序开发者工具并安装，下载路径：

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

进到下载界面后，根据自己的操作系统选择相应的链接进行下载，下载完成后进行安装。

博主这里选择的是开发版64位

第二步：安装登录工具

开发者工具安装完成后我们就可以将其打开，初次打开会需要用微信扫码登录，如下图，用手机微信扫一扫后确认登录就可以了。

第三步：选择一个项目类型,我们这里选择小程序

##第四步：创建一个项目

选择项目类型成功后，会弹出创建项目的窗口，如下图：

小程序的 AppID 相当于小程序平台的一个身份证,可登录自己的小程序平台→开发→开发设置获取

4.小程序初始化目录介绍

我们点击编辑器,可以看到这个项目

接下来介绍页面文件构成

微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中，且 pages 中的第一个页面是小程序的首页。

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件，.wxml后缀的文件是页面结构文件。

直接上图

上码

index.wxml 是页面的结构文件：

<!--index.wxml-->
<view class="container"><!-- 用户 openid --><view class="userinfo"><button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo"class="userinfo-avatar"style="background-image: url({{avatarUrl}})"></button><view><text>爱码士xlz</text>
</view>
</view> <view class="text-title"><text>Hello world</text>
</view>
</view>

本例中使用了<view/>、<button/>、<text/>来搭建页面结构，绑定数据和交互处理函数。

index.js 是页面的脚本文件，在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。

//index.js
const app = getApp()Page({data: {avatarUrl: './user-unlogin.png',userInfo: {},logged: false,takeSession: false,requestResult: ''},onLoad: function() {if (!wx.cloud) {wx.redirectTo({url: '../chooseLib/chooseLib',})return}// 获取用户信息wx.getSetting({success: res => {if (res.authSetting['scope.userInfo']) {// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框wx.getUserInfo({success: res => {this.setData({avatarUrl: res.userInfo.avatarUrl,userInfo: res.userInfo})}})}}})},onGetUserInfo: function(e) {if (!this.logged && e.detail.userInfo) {this.setData({logged: true,avatarUrl: e.detail.userInfo.avatarUrl,userInfo: e.detail.userInfo})}},onGetOpenid: function() {// 调用云函数wx.cloud.callFunction({name: 'login',data: {},success: res => {console.log('[云函数] [login] user openid: ', res.result.openid)app.globalData.openid = res.result.openidwx.navigateTo({url: '../userConsole/userConsole',})},fail: err => {console.error('[云函数] [login] 调用失败', err)wx.navigateTo({url: '../deployFunctions/deployFunctions',})}})},// 上传图片doUpload: function () {// 选择图片wx.chooseImage({count: 1,sizeType: ['compressed'],sourceType: ['album', 'camera'],success: function (res) {wx.showLoading({title: '上传中',})const filePath = res.tempFilePaths[0]// 上传图片const cloudPath = 'my-image' + filePath.match(/\.[^.]+?$/)[0]wx.cloud.uploadFile({cloudPath,filePath,success: res => {console.log('[上传文件] 成功：', res)app.globalData.fileID = res.fileIDapp.globalData.cloudPath = cloudPathapp.globalData.imagePath = filePathwx.navigateTo({url: '../storageConsole/storageConsole'})},fail: e => {console.error('[上传文件] 失败：', e)wx.showToast({icon: 'none',title: '上传失败',})},complete: () => {wx.hideLoading()}})},fail: e => {console.error(e)}})},})

index.wxss 是页面的样式表：

/**index.wxss**/page {background: #f6f6f6;display: flex;flex-direction: column;justify-content: center;
}
.userinfo, .uploader, .tunnel {margin-top: 40rpx;height: 140rpx;width: 100%;background: #fff;border: 1px solid rgba(0, 0, 0, 0.1);border-left: none;border-right: none;display: flex;flex-direction: row;align-items: center;transition: all 300ms ease;
}.userinfo-avatar {width: 100rpx;height: 100rpx;margin: 20rpx;border-radius: 50%;background-size: cover;background-color: white;
}.userinfo-avatar:after {border: none;
}.userinfo-nickname {font-size: 32rpx;color: #007aff;background-color: white;background-size: cover;
}.userinfo-nickname::after {border: none;
}.uploader, .tunnel {height: auto;padding: 0 0 0 40rpx;flex-direction: column;align-items: flex-start;box-sizing: border-box;
}.uploader-text, .tunnel-text {width: 100%;line-height: 52px;font-size: 34rpx;color: #007aff;
}.uploader-container {width: 100%;height: 400rpx;padding: 20rpx 20rpx 20rpx 0;display: flex;align-content: center;justify-content: center;box-sizing: border-box;border-top: 1px solid rgba(0, 0, 0, 0.1);
}.uploader-image {width: 100%;height: 360rpx;
}.tunnel {padding: 0 0 0 40rpx;
}.tunnel-text {position: relative;color: #222;display: flex;flex-direction: row;align-content: center;justify-content: space-between;box-sizing: border-box;border-top: 1px solid rgba(0, 0, 0, 0.1);
}.tunnel-text:first-child {border-top: none;
}.tunnel-switch {position: absolute;right: 20rpx;top: -2rpx;
}.disable {color: #888;
}.service {position: fixed;right: 40rpx;bottom: 40rpx;width: 140rpx;height: 140rpx;border-radius: 50%;background: linear-gradient(#007aff, #0063ce);box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);display: flex;align-content: center;justify-content: center;transition: all 300ms ease;
}.service-button {position: absolute;top: 40rpx;
}.service:active {box-shadow: none;
}.request-text {padding: 20rpx 0;font-size: 24rpx;line-height: 36rpx;word-break: break-all;
}
.text-title{
margin-top: 50%;
}
.text-title text{font-size: 96rpx;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

index.json 是页面的配置文件：

页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。

{"pages": ["pages/index/index","pages/userConsole/userConsole","pages/storageConsole/storageConsole","pages/databaseGuide/databaseGuide","pages/addFunction/addFunction","pages/deployFunctions/deployFunctions","pages/chooseLib/chooseLib"],"window": {"backgroundColor": "#F6F6F6","backgroundTextStyle": "light","navigationBarBackgroundColor": "#F6F6F6","navigationBarTitleText": "爱码士xlz","navigationBarTextStyle": "black"}
}

app.json对应的参数在后面的博客具体介绍

好了，Hello World就出来了,做小程序就这么简单，现在，你是不是也准备跃跃欲试小程序了呢？

可点击预览,扫码后即可在微信客户端中体验

小程序账号注册完整流程参考博客:https://blog.csdn.net/linsongbin1/article/details/79780763