<meter id="hnrfr"></meter>

<font id="hnrfr"></font>

<form id="hnrfr"><ins id="hnrfr"></ins></form><ol id="hnrfr"></ol>

    <i id="hnrfr"></i><cite id="hnrfr"></cite>

          <mark id="hnrfr"><i id="hnrfr"><noframes id="hnrfr">
          ×

          網站建設

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

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

          作者:龍鼎網絡發布時間: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

          公眾號 微信聯系

          手機版 進入手機版

          精品无码一区二区18_亚洲色欧美色2019在线_98欧美人体欧美老妇_AL无码在线观看高潮喷水