微信小程序開發(fā)的基本流程步驟

<!--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>jackson影琪</text>
</view> 
</view> 

<view class="text-title">
 <text>Hello world</text>
</view> 
</view>

//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']) {
 // 已經(jīng)授權(quán)，可以直接調(diào)用 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() {
 // 調(diào)用云函數(shù)
 wx.cloud.callFunction({
 name: 'login',
 data: {},
 success: res => {
 console.log('[云函數(shù)] [login] user openid: ', res.result.openid)
 app.globalData.openid = res.result.openid
 wx.navigateTo({
 url: '../userConsole/userConsole',
 })
 },
 fail: err => {
 console.error('[云函數(shù)] [login] 調(diào)用失敗', 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.fileID
 app.globalData.cloudPath = cloudPath
 app.globalData.imagePath = filePath
 
 wx.navigateTo({
 url: '../storageConsole/storageConsole'
 })
 },
 fail: e => {
 console.error('[上傳文件] 失敗：', e)
 wx.showToast({
 icon: 'none',
 title: '上傳失敗',
 })
 },
 complete: () => {
 wx.hideLoading()
 }
 })

 },
 fail: e => {
 console.error(e)
 }
 })
 },

})

/**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;
}

{
 "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": "jackson影琪",
 "navigationBarTextStyle": "black"
 }
}