1. <tbody id="jfc4y"><pre id="jfc4y"></pre></tbody>
        ×

        網站建設

        當前位置:首頁 > 龍鼎新聞 > 行業新聞 >

        微信小程序項目代碼結構及說明

        作者:龍鼎網絡發布時間:2021-01-30 23:03:33瀏覽次數:15386文章出處:晉城自適應網站制作

        4.1,項目代碼結構

        點擊開發者工具上側導航的“編輯器”,我們可以看到這個項目,已經初始化并包含了一些簡單的代碼文件。最關鍵也是必不可少的,是 app.js、app.json、app.wxss 這三個。其中,.js后綴的是腳本文件,.json后綴的文件是配置文件,.wxss后綴的是樣式表文件。微信小程序會讀取這些文件,并生成小程序實例。

        下面我們簡單了解這三個文件的功能,方便修改以及從頭開發自己的微信小程序。

        ? 1、app.js是小程序的腳本代碼。我們可以在這個文件中監聽并處理小程序的生命周期函數、聲明全局變量。調用框架提供的豐富的 API,如本例的同步存儲及同步讀取本地數據。

        2、? app.json 是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成,配置小程序的窗口背景色,配置導航條樣式,配置默認標題。注意該文件不可添加任何注釋。

        3、app.wxss 是整個小程序的公共樣式表。我們可以在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規則。

          我們注意到,在實例程序的代碼中還有2個文件夾,一個是pages,一個是style,其中style是放通用樣式的一個文件夾,pages是存放所有頁面的文件夾。我們著重講一下這個pages.

        4.2,小程序頁面文件構成

         在這個示例中,我們有七個頁面,index 頁面,即歡迎頁,他們都在 pages 目錄下。微信小程序中的每一個頁面的【路徑+頁面名】都需要寫在 app.json 的 pages 中,且 pages 中的第一個頁面是小程序的首頁。

         每一個小程序頁面是由同路徑下同名的四個不同后綴文件的組成,如:index.js、index.wxml、index.wxss、index.json。.js后綴的文件是腳本文件,.json后綴的文件是配置文件,.wxss后綴的是樣式表文件,.wxml后綴的文件是頁面結構文件。

        ? index.wxml 是頁面的結構文件:

        復制代碼
         1 <!--index.wxml-->
         2 <view class="container">
         3 
         4   <!-- 用戶 openid -->
         5   <view class="userinfo">
         6     <button 
         7       open-type="getUserInfo" 
         8       bindgetuserinfo="onGetUserInfo"
         9       class="userinfo-avatar"
        10       style="background-image: url({{avatarUrl}})"
        11     ></button>
        12     <view>
        13       <text>jackson影琪</text>
        14 </view> 
        15 </view> 
        16 
        17 <view class="text-title">
        18       <text>Hello world</text>
        19 </view>  
        20 </view>
        復制代碼

        ? 本例中使用了<view/>、<button/>、<text/>來搭建頁面結構,綁定數據和交互處理函數。

        ? index.js 是頁面的腳本文件,在這個文件中我們可以監聽并處理頁面的生命周期函數、獲取小程序實例,聲明并處理數據,響應頁面交互事件等。

        復制代碼
          1 //index.js
          2 const app = getApp()
          3 
          4 Page({
          5   data: {
          6     avatarUrl: './user-unlogin.png',
          7     userInfo: {},
          8     logged: false,
          9     takeSession: false,
         10     requestResult: ''
         11   },
         12 
         13   onLoad: function() {
         14     if (!wx.cloud) {
         15       wx.redirectTo({
         16         url: '../chooseLib/chooseLib',
         17       })
         18       return
         19     }
         20 
         21     // 獲取用戶信息
         22     wx.getSetting({
         23       success: res => {
         24         if (res.authSetting['scope.userInfo']) {
         25           // 已經授權,可以直接調用 getUserInfo 獲取頭像昵稱,不會彈框
         26           wx.getUserInfo({
         27             success: res => {
         28               this.setData({
         29                 avatarUrl: res.userInfo.avatarUrl,
         30                 userInfo: res.userInfo
         31               })
         32             }
         33           })
         34         }
         35       }
         36     })
         37   },
         38 
         39   onGetUserInfo: function(e) {
         40     if (!this.logged && e.detail.userInfo) {
         41       this.setData({
         42         logged: true,
         43         avatarUrl: e.detail.userInfo.avatarUrl,
         44         userInfo: e.detail.userInfo
         45       })
         46     }
         47   },
         48 
         49   onGetOpenid: function() {
         50     // 調用云函數
         51     wx.cloud.callFunction({
         52       name: 'login',
         53       data: {},
         54       success: res => {
         55         console.log('[云函數] [login] user openid: ', res.result.openid)
         56         app.globalData.openid = res.result.openid
         57         wx.navigateTo({
         58           url: '../userConsole/userConsole',
         59         })
         60       },
         61       fail: err => {
         62         console.error('[云函數] [login] 調用失敗', err)
         63         wx.navigateTo({
         64           url: '../deployFunctions/deployFunctions',
         65         })
         66       }
         67     })
         68   },
         69 
         70   // 上傳圖片
         71   doUpload: function () {
         72     // 選擇圖片
         73     wx.chooseImage({
         74       count: 1,
         75       sizeType: ['compressed'],
         76       sourceType: ['album', 'camera'],
         77       success: function (res) {
         78 
         79         wx.showLoading({
         80           title: '上傳中',
         81         })
         82 
         83         const filePath = res.tempFilePaths[0]
         84         
         85         // 上傳圖片
         86         const cloudPath = 'my-image' + filePath.match(/\.[^.]+?$/)[0]
         87         wx.cloud.uploadFile({
         88           cloudPath,
         89           filePath,
         90           success: res => {
         91             console.log('[上傳文件] 成功:', res)
         92 
         93             app.globalData.fileID = res.fileID
         94             app.globalData.cloudPath = cloudPath
         95             app.globalData.imagePath = filePath
         96             
         97             wx.navigateTo({
         98               url: '../storageConsole/storageConsole'
         99             })
        100           },
        101           fail: e => {
        102             console.error('[上傳文件] 失?。?#39;, e)
        103             wx.showToast({
        104               icon: 'none',
        105               title: '上傳失敗',
        106             })
        107           },
        108           complete: () => {
        109             wx.hideLoading()
        110           }
        111         })
        112 
        113       },
        114       fail: e => {
        115         console.error(e)
        116       }
        117     })
        118   },
        119 
        120 })
        復制代碼

        index.wxss 是頁面的樣式表:

        復制代碼
          1 /**index.wxss**/
          2 
          3 page {
          4   background: #f6f6f6;
          5   display: flex;
          6   flex-direction: column;
          7   justify-content: center;
          8 }
          9 .userinfo, .uploader, .tunnel {
         10   margin-top: 40rpx;
         11   height: 140rpx;
         12   width: 100%;
         13   background: #fff;
         14   border: 1px solid rgba(0, 0, 0, 0.1);
         15   border-left: none;
         16   border-right: none;
         17   display: flex;
         18   flex-direction: row;
         19   align-items: center;
         20   transition: all 300ms ease;
         21 }
         22 
         23 .userinfo-avatar {
         24   width: 100rpx;
         25   height: 100rpx;
         26   margin: 20rpx;
         27   border-radius: 50%;
         28   background-size: cover;
         29   background-color: white;
         30 }
         31 
         32 .userinfo-avatar:after {
         33   border: none;
         34 }
         35 
         36 .userinfo-nickname {
         37   font-size: 32rpx;
         38   color: #007aff;
         39   background-color: white;
         40   background-size: cover;
         41 }
         42 
         43 .userinfo-nickname::after {
         44   border: none;
         45 }
         46 
         47 .uploader, .tunnel {
         48   height: auto;
         49   padding: 0 0 0 40rpx;
         50   flex-direction: column;
         51   align-items: flex-start;
         52   box-sizing: border-box;
         53 }
         54 
         55 .uploader-text, .tunnel-text {
         56   width: 100%;
         57   line-height: 52px;
         58   font-size: 34rpx;
         59   color: #007aff;
         60 }
         61 
         62 .uploader-container {
         63   width: 100%;
         64   height: 400rpx;
         65   padding: 20rpx 20rpx 20rpx 0;
         66   display: flex;
         67   align-content: center;
         68   justify-content: center;
         69   box-sizing: border-box;
         70   border-top: 1px solid rgba(0, 0, 0, 0.1);
         71 }
         72 
         73 .uploader-image {
         74   width: 100%;
         75   height: 360rpx;
         76 }
         77 
         78 .tunnel {
         79   padding: 0 0 0 40rpx;
         80 }
         81 
         82 .tunnel-text {
         83   position: relative;
         84   color: #222;
         85   display: flex;
         86   flex-direction: row;
         87   align-content: center;
         88   justify-content: space-between;
         89   box-sizing: border-box;
         90   border-top: 1px solid rgba(0, 0, 0, 0.1);
         91 }
         92 
         93 .tunnel-text:first-child {
         94   border-top: none;
         95 }
         96 
         97 .tunnel-switch {
         98   position: absolute;
         99   right: 20rpx;
        100   top: -2rpx;
        101 }
        102 
        103 .disable {
        104   color: #888;
        105 }
        106 
        107 .service {
        108   position: fixed;
        109   right: 40rpx;
        110   bottom: 40rpx;
        111   width: 140rpx;
        112   height: 140rpx;
        113   border-radius: 50%;
        114   background: linear-gradient(#007aff, #0063ce);
        115   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
        116   display: flex;
        117   align-content: center;
        118   justify-content: center;
        119   transition: all 300ms ease;
        120 }
        121 
        122 .service-button {
        123   position: absolute;
        124   top: 40rpx;
        125 }
        126 
        127 .service:active {
        128   box-shadow: none;
        129 }
        130 
        131 .request-text {
        132   padding: 20rpx 0;
        133   font-size: 24rpx;
        134   line-height: 36rpx;
        135   word-break: break-all;
        136 }
        137 .text-title{
        138 margin-top: 50%;
        139 }
        140 .text-title text{
        141   font-size: 96rpx;
        142   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        143 }
        復制代碼

        頁面的樣式表是非必要的。當有頁面樣式表時,頁面的樣式表中的樣式規則會層疊覆蓋 app.wxss 中的樣式規則。如果不指定頁面的樣式表,也可以在頁面的結構文件中直接使用 app.wxss 中指定的樣式規則。

        ? index.json 是頁面的配置文件:

        ? 頁面的配置文件是非必要的。當有頁面的配置文件時,配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件,則在該頁面直接使用 app.json 中的默認配置。

        復制代碼
         1 {
         2   "pages": [
         3     "pages/index/index",
         4     "pages/userConsole/userConsole",
         5     "pages/storageConsole/storageConsole",
         6     "pages/databaseGuide/databaseGuide",
         7     "pages/addFunction/addFunction",
         8     "pages/deployFunctions/deployFunctions",
         9     "pages/chooseLib/chooseLib"
        10   ],
        11   "window": {
        12     "backgroundColor": "#F6F6F6",
        13     "backgroundTextStyle": "light",
        14     "navigationBarBackgroundColor": "#F6F6F6",
        15     "navigationBarTitleText": "jackson影琪",
        16     "navigationBarTextStyle": "black"
        17   }
        18 }
        復制代碼

        運行結果如下:

        手機預覽

        ? 開發者工具上側菜單欄,點擊"預覽",掃碼后即可在微信客戶端中體驗。

        客戶評價

        專業的網站建設、響應式、手機站微信公眾號開發

        © 2010-2020 龍鼎網絡 版權所有 晉ICP備14008335號-1

        注冊號:140502200020561

        公眾號 微信聯系

        手機版 進入手機版

        中文无码精品一区二区三区_在线ⅴ片免费观看视频_HEYZO无码专区人妻_91最新亚洲精品中文字幕