微信小程序开发的基本流程步骤

<!--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']) {
     // 已经授权，可以直接调用 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.openid
    wx.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(/\.[^.]+"htmlcode">

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


页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。
"htmlcode">

{
 "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"
 }
}


运行结果如下：

手机预览
"预览"，扫码后即可在微信客户端中体验。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。