1. <rp id="d4xu4"><ruby id="d4xu4"></ruby></rp><progress id="d4xu4"><track id="d4xu4"></track></progress>

      <button id="d4xu4"><tr id="d4xu4"></tr></button>

      歡迎來到華鼎網絡,網站優化、網站建設、移動網站優化、深圳seo
      咨詢,就免費贈送域名與服務器,咨詢熱線:18824580418當前位置: 主頁 > 網站優化 > 網站優化知識 >
      推薦內容
      聯系我們
      電話咨詢:18824580418 13518128114
      E-mail:1735380881@qq.com
      地址: 深圳市寶安

      小程序編輯配置詳細介紹

      作者/深圳seo:小程序編輯 來源:深圳seo 2022-02-14

      最近很多人購買插件之后,安裝小程序插件之后,不知道下一步要干啥,所以專門針對這種情況寫一個詳細的教程。(一下教程的賬號配置以百度小程序為主)

      一、先注冊百度(微信或頭條)小程序賬號

      (1)登錄百度小程序官網https://smartprogram.baidu.com注冊小程序賬號,申請過程不再贅述
      (2)申請過后登陸你的小程序賬號,進入“開發管理”----“設置”----切換到“開發設置”如圖,保存自己的appid、appkey以及appsecret,特別是appsecret只出現一次,一定要保存好
      小程序編輯
       
      然后在“開發設置”向下有個“服務器域名”,全部填寫自己要對接的網站的域名,另外下邊的webview可以根據自己實際情況考慮要不要配置。
      小程序綁定網站

      二、小程序端配置

      1、app.js和app.json配置
      (1)下載百度小程序開發者工具,安裝工具,下載地址:https://smartprogram.baidu.com/docs/develop/devtools/history/
      (2)打開開發者工具,導入我的demo
      (3)進入小程序之后,點擊右上角“項目信息”--->修改appid為您的小程序appid

      小程序排名
      (3)打開app.json、app.js把我的信息都改成你們的,特別是app.js中的safecode(安全碼)對應你的網站后臺自動生成的安全碼,aid對應網站后臺的小程序編號。
      注意:app.js中的aid是您的網站后臺創建小程序的編號aid,不是百度提供appid,不要弄混了,aid僅僅是為了區分多個小程序的情況,比如你后續創建了aid為2的微信小程序等等
      小程序編輯
      配置好這些之后,一定要先清除緩存重新編譯一下

      (4)【重點】小程序首頁的配置,打開/pages/index/index.js
      配置index.js之前,先說一下小程序頁面的執行順序:onLoad--->onReady--->onShow--->onHide--->onUnload等等,其實平時頁面最常用的就兩個:onLoad和onShow。
      打開index.js找到onLoad,看截圖說明(為了防止六久閣抄襲,不提供源碼)
      小程序配置
      index.js中的onLoad里邊不需要做任何修改,只需要找到toplist方法即可,toplist是個批量請求接口,可以批量請求多個欄目
      小程序安裝

      配置好index.js,保存這時候首頁就會出現你的網站內容了。
      小程序上線
      (5)配置列表頁
      service、list、case是三個列表頁,其實這三個頁面代碼是完全一樣的,由于小程序的tabbar頁面互相之間跳轉是不支持傳遞參數的,所以只能給tabbar配置一個獨立頁面。什么是tabbar頁面?
       

      這四個就是tabbar頁面,互相之間切換是無法傳遞參數的,所以在四個頁面需要先默認一個typeid,具體在每個頁面的對應js里邊。
      如果想修改tabbar頁面的鏈接和文字,打開app.json找到“tabBar”就可以自己設置和修改:
      小程序怎么調用

      (6)配置單頁面
      pages/page/page是個單頁面,對應網站后臺設置的封面欄目,一般用作關于我們、聯系我們之類的頁面(注意:必須是后臺設置了封面的欄目)
      同時為了兼容有些網站單頁面和列表頁混合的情況,page頁面既支持單頁面,也支持列表頁,但是建議以單頁面為主。
      (7)其他頁面配置
      search搜索頁面,feedback評論頁面,map地圖頁面,header公共頭部,footer公共底部,show內容展示頁。
      list和show是公共列表和公共內容頁面不允許設置tababr(因為設置了tabbar就不允許傳參了),如果需要新增頁面,可以復制對應的頁面,改個名字即可,另外別忘了在app.json最上面加一下你剛才創建的頁面,然后重新編譯即可

      三、常用參數和方法解釋


      常用參數和函數
      typeid:網站欄目
      listtype:列表類型,內置5種,可以去template/list.swan里邊添加
      swan.getStorageSync('system')調用網站配置緩存,
      swan.getStorageSync('categorys')調用全站欄目緩存

      utils/common.js內置常用函數解釋:
      common.js調用方式為在每個頁面最上面引入:

      code騰石建站

      1. var common = require('../../utils/common.js'); 
      然后每個函數調用方式為:common.函數名,例如:common.get_catlist(),common.callphone()
      common.get_menu(typeid) 調用typeid的子欄目,typied為0時調用全部欄目
      common.callphone() 撥打電話
      common.get_catlist(typeid):調用typeid的兄弟欄目或者子欄目(自動判斷)
      common.get_curtypeid(typeid,typeid):判斷typeid或子欄目高亮
      common.get_childid(typeid,1)獲取typeid的子欄目,1表示是否包含自己
      common.get_brotherid(typeid,1)獲取typeid的兄弟欄目,1表示是否包含自己
      common.backhome():全局通用返回首頁代碼

      utils/util.js內置常用函數解釋:
      util.js調用方式為在每個頁面最上面引入:

      code騰石建站

      1. var util = require('../../utils/util.js'); 
      util.formatTime():格式化時間戳,如:util.formatTime()util.formatTime(news[i].pubdate, 'Y-M-D')
      util.escape2Html(str):轉換html危險字符
      util.removeHTML(str):去掉html標簽
      util.checkPhone(phone,isempty = 1),判斷電話號碼是否正確,后邊的1表示不能為空,0表示允許為空
      util.checkEmail(email,0) 判斷郵箱格式是否正確,后邊的01表示可以為空,1表示不能為空
      util.isEmpty(str) 判斷是否為空

      util.request.js是對api請求的封裝,沒有基礎不建議使用修改

      app.js內置的二個promise方法:

      app.get_cat().then()  promise方式調用欄目緩存
      app.get_sys().then()  promise方式調用設置緩存


      (1)如何修改鏈接所跳轉的頁面
      打開對應的swan頁面,每個點擊事件都是通過bindtap觸發的,所以想修改對應事件,首頁去swan找到對應的bindtap事件,比如查看新聞的 bindtap='show_detail'
      如何更改跳轉頁面
      意思就是:點擊觸發show_detail方法,然后去對應的js找到show_detail方法:
      小程序編輯完成
      如果想讓show_detail打開其他頁面 只需要修改里邊的swan.navigateTo里邊的對應路徑即可,不過最好是復制一份show_detail改成show_detail2,然后在2里邊修改對應的路徑,然后前端的bindtap改成bindtap="show_detail2"即可。

      (2)列表頁為啥出現了其他欄目的內容
      list  case service  page這四個頁面,讀取當前欄目信息的時候,會自動判斷當前欄目是否有兄弟欄目或者子欄目,會優先展示兄弟欄目的,這就是為啥出現其他欄目的情況,
      修改方法,找到對應onLoad或onShow里邊的代碼:

      code騰石建站

      1. var catlist = common.get_catlist(typeid);//獲取子欄目或者兄弟欄目列表 
      如果改成調用子欄目:

      code騰石建站

      1. var catlist = common.get_childid(typeid,1);//獲取子欄目,后邊的1表示是否調用本身 
      改成是否調用兄弟欄目:

      code騰石建站

      1. var catlist = common.get_bortherid(typeid);//獲取兄弟欄目 
      改成調用全部單頁面:

      code騰石建站

      1. var catlist = common.get_pagelest(typeid);//獲取所有單頁面 

      (3)如何設置web化標題
      默認自動給你們設置好了,只需要通過web戶預覽然后嗯:F12或者右鍵點擊審查元素,在代碼head里邊可以查看效果。
      默認欄目seo為:
      title:自定義欄目標題+小程序名稱/欄目名稱+小程序名稱
      keywords:后臺配置通用關鍵詞/自定義欄目關鍵詞
      description:后臺配置通用描述/自定義欄目描述
      releaseDate: 后臺設置時間
      image: 默認調用banner

      內容頁默認SEO:
      title:文章名稱+欄目名稱+小程序名稱
      keywords:文章關鍵詞
      description:文章描述
      releaseDate: 后臺設置時間
      image: 默認調用banner,可以改成調用文章縮略圖images:[content.litpic]
      articleTitle文章標題

      (4)小程序如何url適配
      url適配就是為了讓小程序的頁面和H5頁面一一對應起來
      以我的網站為例:
      首頁:https://dede.tengcee.com/$ => pages/index/index
      服務項目:https://dede.tengcee.com/a/fuwuxiangmu/$ => pages/service/service
      案例:https://dede.tengcee.com/a/kehuanli/$ => pages/case/case

      普通列表:https://dede.tengcee.com/a/xinwenzixun/xingyezixun/list_21_2.html => pages/list/list?typeid=21
      適配寫法:https://dede.tengcee.com/a/xinwenzixun/xingyezixun/list_([^\.]+)_([^\.]+).html => pages/list/list?typeid=${1}&page=${2}

      內容頁:https://dede.tengcee.com/a/xinwenzixun/xingyezixun/20190707/74.html =>pages/show/show?id=74
      適配寫法:https://dede.tengcee.com/a/xinwenzixun/xingyezixun/([^\.]+)/([^\.]+).html =>pages/show/show?id=${1}
      (注意:我這個內容頁靜態化路徑中有個時間,如果你們自己定義了,可以不按照這個,比如下邊)
      https://dede.tengcee.com/news/74.html =>pages/show/show?id=74
      適配寫法:https://dede.tengcee.com/news/([^\.]+).html =>pages/show/show?id=${1}


      單頁面:https://dede.tengcee.com/aboutus/$  =>pages/page/page?typeid=7

      如果沒用到正則,即完全適配的時候需要加$符號,${1}表示對應前面第一個()小括號里邊的內容,同理${2}對應第二個

      更多常見問題整理中.....
      波多野结字衣中文字幕
      1. <rp id="d4xu4"><ruby id="d4xu4"></ruby></rp><progress id="d4xu4"><track id="d4xu4"></track></progress>

        <button id="d4xu4"><tr id="d4xu4"></tr></button>