因为项目需要用到小程序,自己想写个从零到有的微信小程序专题,记录学习心得。
目录
1.微信小程序简介
2.注册小程序
3.安装开发工具
4.小程序初始化目录介绍
1.微信小程序简介
微信小程序这个词可以分解为“微信”和“小程序”两部分
(1),其中“微信”可以理解为“微信中的”，指的是小程序的执行环境；当然微信在提供执行环境的同时也延长了用户使用微信的时间。
(2),“小程序”是说它首先是程序，然后具备轻便的特征。小程序并不像其他应用那样，它不需要安装，而是通过扫描二维码等打开后直接执行；用完以后也不需要卸载。这就是所谓用完即走的原则。
2.注册小程序
在创建小程序之前,首先需要注册小程序账号
用没有注册过微信公众平台的邮箱注册一个微信公众号
3.安装开发工具
第一步：下载微信小程序开发者工具并安装，下载路径：
https://mp./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.jsconst 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就出来了,做小程序就这么简单，现在，你是不是也准备跃跃欲试小程序了呢？
可点击预览,扫码后即可在微信客户端中体验
小程序账号注册完整流程参考博客:/linsongbin1/article/details/79780763
