小程序如何開發路由

Ⅰ 如何直連公網ip調試微信小程序

在開發小程序時，很可能還沒有公網伺服器，沒有域名，也沒有https。只能在公司內網體驗小程序。
這時候如果老闆在外面想看看小程序開發進度怎麼辦呢？
你可以這樣辦:

設置不校驗合法域名。。。。。

這樣設置後，小程序已經可以在內網測試體驗了，外網不能。

路由器設置外網ip對內網ip的轉發,大多路由器都有【虛擬伺服器】設置的功能。如下設置

例如內網訪問 http://192.168.1.212:9100/api/XX/xxxx/
映射後外網訪問 http://[你的外網ip]:2020/api/XX/xxxx/

這樣設置後，介面API已經可以外網訪問了，但是在小程序裡面不行。

手機微信 外網打開 體驗版/開發版小程序，這時候發現沒有數據，介面沒訪問。

Ⅱ 為什麼nat小程序顯示介面錯誤

應該是access_token獲取失敗了，沒有傳遞正確的access_token，導致介面訪問許可權不足。
解決辦法：第一步：找到小程序裡面的開發選項，找到伺服器域名，獲取域名，保存域名；
第二步：打開小程序，刷新頁面，打開詳情，我們看到域名已經改變；
第三步：配置二級路由，在app.json中的page裡面配置跳轉的路由。

Ⅲ 微信小程序架構篇

一、小程序架構
每個小程序的結構都有兩個主要部分構成：主體部分+各個頁面。類似於許多框架，主體部分主要用於核心的配置，各個頁面主要用於不同業務場景。

1.1、主體部分主要由3個文件構成
1）app.js：小程序邏輯，初始化APP
2）app.json：小程序配置，比如導航、窗口、頁面http請求跳轉等
3）app.wxss：公共樣式配置

主體配置完成之後，就是對應業務開發了，也就是開發者最常操作的頁面。小程序頁面設計基本上也是遵循MVC結構進行構建。

1.2、頁面由4個文件構成
1）js：頁面邏輯，相當於控制層（C）；也包括部分的數據（M）
2）wxml：頁面結構展示，相當於視圖層（V）
3）wxss：頁面樣式表，純前端，用於輔助wxml展示
4）json：頁面配置，配置一些頁面展示的數據，充當部分的模型（M）

二、配置app.json
app.json
全局配置頁面文件的路徑、窗口表現、設置網路超時時間、設置多tab等。

pages
接受一個數組，每一項都是字元串，來指定小程序由哪些頁面組成

window
用於設置小程序的狀態欄、導航條、標題、窗口背景色。

tabBar
通過tabBar配置項指定tab欄的表現，以及tab切換時顯示的對應頁面。tabBar配置數組，只能配置最少2個、最多5個tab，tab按數組的順序排序。

networkTimeout
可以設置各種網路請求的超時時間。

debug：true/false
可以在開發者工具中開啟debug模式，在開發者工具的控制檯面板，調試信息以info的形式給出，其信息有Page的注冊，頁面路由，數據更新，事件觸發。可以幫助開發者快速定位一些常見的問題

page.json
每一個小程序頁面也可以使用.json文件來對本頁面的窗口表現進行配置。頁面的哦誒址比app.json全局配置簡單的多，只是設置app.json中的window配置項的內容，頁面中配置項會覆蓋app.json的window中相同的配置項。

Ⅳ 微信小程序怎麼開發 微信小程序開發教程分享

微信應用號（小程序，「應用號」的新稱呼）終於來了！
目前還處於內測階段，微信只邀請了部分企業參與封測。想必大家都關心應用號的最終形態到底是什麼樣子？怎樣將一個「服務號」改造成為「小程序」？
我們暫時以一款簡單的第三方工具的實例，來演示一下開發過程吧。

序言
開始開發應用號之前，先看看官方公布的「小程序」教程吧！（以下內容來自微信官方公布的「小程序」開發指南）
本文檔將帶你一步步創建完成一個微信小程序，並可以在手機上體驗該小程序的實際效果。這個小程序的首頁將會顯示歡迎語以及當前用戶的微信頭像，點擊頭像，可以在新開的頁面中查看當前小程序的啟動日誌。

1. 獲取微信小程序的 AppID
首先，我們需要擁有一個帳號，如果你能看到該文檔，我們應當已經邀請並為你創建好一個帳號。注意不可直接使用服務號或訂閱號的 AppID。 利用提供的帳號，登錄 https://mp.weixin.qq.com ，就可以在網站的「設置」-「開發者設置」中，查看到微信小程序的 AppID 了。

注意：如果我們不是用注冊時綁定的管理員微信號，在手機上體驗該小程序。那麼我們還需要操作「綁定開發者」。即在「用戶身份-開發者」模塊，綁定上需要體驗該小程序的微信號。本教程默認注冊帳號、體驗都是使用管理員微信號。

2. 創建項目
我們需要通過開發者工具，來完成小程序創建和代碼編輯。
開發者工具安裝完成後，打開並使用微信掃碼登錄。選擇創建「項目」，填入上文獲取到的 AppID，設置一個本地項目的名稱（非小程序名稱），比如「我的第一個項目」，並選擇一個本地的文件夾作為代碼存儲的目錄，點擊「新建項目」就可以了。
為方便初學者了解微信小程序的基本代碼結構，在創建過程中，如果選擇的本地文件夾是個空文件夾，開發者工具會提示，是否需要創建一個 quick start 項目。選擇「是」，開發者工具會幫助我們在開發目錄里生成一個簡單的 demo。

項目創建成功後，我們就可以點擊該項目，進入並看到完整的開發者工具界面，點擊左側導航，在「編輯」里可以查看和編輯我們的代碼，在「調試」里可以測試代碼並模擬小程序在微信客戶端效果，在「項目」里可以發送到手機里預覽實際效果。

3. 編寫代碼
點擊開發者工具左側導航的「編輯」，我們可以看到這個項目，已經初始化並包含了一些簡單的代碼文件。最關鍵也是必不可少的，是 app.js、app.json、app.wxss 這三個。其中，.js 後綴的是腳本文件，.json 後綴的文件是配置文件，.wxss 後綴的是樣式表文件。微信小程序會讀取這些文件，並生成小程序實例。
下面我們簡單了解這三個文件的功能，方便修改以及從頭開發自己的微信小程序。
app.js 是小程序的腳本代碼。我們可以在這個文件中監聽並處理小程序的生命周期函數、聲明全局變數。調用 MINA 提供的豐富的 API，如本例的同步存儲及同步讀取本地數據。

//app.js App({

onLaunch: function () { //調用API從本地緩存中獲取數據 var logs = wx.getStorageSync('logs') || []

logs.unshift(Date.now())

wx.setStorageSync('logs', logs)

},

getUserInfo:function(cb){ var that = this; if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo)

}else{ //調用登錄介面 wx.login({

success: function () {

wx.getUserInfo({

success: function (res) {

that.globalData.userInfo = res.userInfo; typeof cb == "function" && cb(that.globalData.userInfo)

}

})

}

});

}

},

globalData:{

userInfo:null }

})

app.json 是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口 背景色，配置導航條樣式，配置默認標題。注意該文件不可添加任何注釋。
{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }

}

app.wxss 是整個小程序的公共樣式表。我們可以在頁面組件的class屬性上直接使用app.wxss中聲明的樣式規則。
/**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box;

}

3. 創建頁面
在這個教程里，我們有兩個頁面，index 頁面和 logs 頁面，即歡迎頁和小程序啟動日誌的展示頁，他們都在 pages 目錄下。微信小程序中的每一個頁面的【路徑+頁面名】都需要寫在 app.json 的 pages 中，且 pages 中的第一個頁面是小程序的首頁。
每一個小程序頁面是由同路徑下同名的四個不同後綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。.js 後綴的文件是腳本文件，.json 後綴的文件是配置文件，.wxss 後綴的是樣式表文件，.wxml 後綴的文件是頁面結構文件。
index.wxml是頁面的結構文件：
<view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"> image> <text class="userinfo-nickname">{{userInfo.nickName}} text> view> <view class="usermotto"> <text class="user-motto">{{motto}} text> view> view>

本例中使用了、、來搭建頁面結構，綁定數據和交互處理函數。
index.js 是頁面的腳本文件，在這個文件中我們可以監聽並處理頁面的生命周期函數、獲取小程序實例，聲明並處理數據，響應頁面交互事件等。
//index.js //獲取應用實例 var app = getApp()

Page({

data: {

motto: 'Hello World',

userInfo: {}

}, //事件處理函數 bindViewTap: function() {

wx.navigateTo({

url: '../logs/logs' })

},

onLoad: function () { console.log('onLoad') var that = this //調用應用實例的方法獲取全局數據 app.getUserInfo(function(userInfo){ //更新數據 that.setData({

userInfo:userInfo

})

})

}

})

index.wxss是頁面的樣式表：
/**index.wxss**/ .userinfo { display: flex; flex-direction: column; align-items: center;

} .userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%;

} .userinfo-nickname { color: #aaa;

} .usermotto { margin-top: 200px;

}

頁面的樣式表是非必要的。當有頁面樣式表時，頁面的樣式表中的樣式規則會層疊覆蓋 app.wxss 中的樣式規則。如果不指定頁面的樣式表，也可以在頁面的結構文件中直接使用 app.wxss 中指定的樣式規則。
index.json是頁面的配置文件：
頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。
logs的頁面結構
<view class="container log-list"> <block wx:for-items="{{logs}}" wx:for-item="log"> <text class="log-item">{{index + 1}}. {{log}} text> block> view>

logs 頁面使用 控制標簽來組織代碼，在 上使用 wx:for-items 綁定 logs 數據，並將 logs 數據循環展開節點

//logs.js var util = require('../../utils/util.js')

Page({

data: {

logs: []

},

onLoad: function () { this.setData({

logs: (wx.getStorageSync('logs') || []).map(function (log) { return util.formatTime(new Date(log))

})

})

}

})

運行結果如下：

4. 手機預覽
開發者工具左側菜單欄選擇「項目」，點擊「預覽」，掃碼後即可在微信客戶端中體驗。

目前，預覽和上傳功能尚無法實現，需要等待微信官方的下一步更新。

如你所見，微信官方給出的開發指南還非常簡單，很多細節、代碼和功能都沒有明確的展示，所以接下來就到展示實力的時候啦！開發教程正式開始！

第一章：准備工作

做好准備工作很重要。開發一個微信應用號，你需要提前到微信的官方網站（weixin.qq.com）下載開發者工具。

1. 下載最新微信開發者工具，打開後你會看到該界面：

2. 點擊「新建 web+」項目，隨後出現如下畫面：

3. 該頁面內的各項內容需要注意——
AppID：依照官方解釋來填。
Appname: 項目最外層文件夾名稱，如你將其命名為「ABC」，則之後的全部項目內容均將保存在「/ABC/…」目錄下。
本地開發目錄：項目存放在本地的目錄。

註：再次強調，如果你和團隊成員共同開發該項目，則建議你們使用同樣的目錄名稱及本地目錄，以確保協同開發的統一性。如果你之前已有項目，則導入過程與以上內容近似，不再贅述。

4. 准備工作全部完成後，點擊「新建項目」按鈕，彈出框點「確定」。

5. 如上圖所示，此刻，微信開發者工具已經為你自動構建了一個初始的 demo 項目，該項目內包含了一個微信應用項目所需具備的基本內容和框架結構。點擊項目名稱（圖中即「cards」）進入該項目，就能看到整個項目的基本架構了：

第二章：項目構架

微信目前用戶群體非常龐大，微信推出公眾號以後，火爆程度大家都看得到，也同樣推動著 Html 5 的高速發展，隨著公眾號業務的需求越來越復雜，應用號現在的到來也是恰到好處。
我們發現，微信提供給開發者的方式也在發生全面的改變：從操作 DOM 轉為操作數據，基於微信提供的一個過橋工具實現很多 Html 5 在公眾號很難實現的功能，有點類似於 hybrid 開發，不同於 hybrid 開發的方式是：微信開放的介面更為嚴謹，結構必須採用他提供給的組件，外部的框架和插件都不能在這里使用上，讓開發者完全脫離操作 DOM，開發思想轉變很大。
工欲善其事，必先利其器。理解它的核心功能非常重要，先了解它的整個運作流程。

生命周期：
在index.js裡面：

開發者工具上 Console 可以看到：

在首頁 console 可以看出順序是 App Launch-->App Show-->onLoad-->onShow-->onReady。
首先是整個 app 的啟動與顯示，app 的啟動在 app.js 裡面可以配置，其次再進入到各個頁面的載入顯示等等。
可以想像到這里可以處理很多東西了，如載入框之類的都可以實現等等。

路由：
路由在項目開發中一直是個核心點，在這里其實微信對路由的介紹很少，可見微信在路由方面經過很好的封裝，也提供三個跳轉方法。
wx.navigateTo(OBJECT)：保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面。
wx.redirectTo(OBJECT)：關閉當前頁面，跳轉到應用內的某個頁面。
wx.navigateBack()：關閉當前頁面，回退前一頁面。
這三個基本上使用足夠，在路由方面微信封裝的很好，開發者根本不用去配置路由，往往很多框架在路由方面配置很繁瑣。

組件：
此次微信在組件提供方面也是非常全面，基本上滿足項目需求，故而開發速度非常快，開發前可以認真瀏覽幾次，開發效率會很好。

其它：
任何外部框架以及插件基本上無法使用，就算原生的 js 插件也很難使用，因為以前的 js 插件也基本上全部是一操作 dom 的形式存在，而微信應用號此次的架構是不允許操作任何 dom，就連以前開發者們習慣使用的動態設置的rem.js也是不支持的。
此次微信還提供了 WebSocket，就可以直接利用它做聊天，可以開發的空間非常大。
跟公眾號對比發現，開發應用號組件化，結構化，多樣化。新大陸總是充滿著驚喜，更多的彩蛋等著大家來發現。
接下來開始搞一些簡單的代碼了！

1. 找到項目文件夾，導入你的編輯器裡面。在這里，我們使用了 Sublime Text 編輯器。你可以根據自己的開發習慣選擇自己喜歡的編輯器。

2. 接下來，你需要根據自己的項目內容調整項目結構。在範例項目中，「card_course」目錄下面主要包含了「tabBar」頁面以及該應用的一些配置文件。

3. 示例項目的「tabBar」是五個菜單按鈕：

4. 找到「app.json」文件，用來配置這個五個菜單。在代碼行中找到「tabBar」：

你可以根據實際項目需求更改，其中：
「Color」是底部字體顏色，「selectedColor」是切換到該頁面高亮顏色，「borderStyle」是切換菜單上面的一條線的顏色，「backgroundColor」是底部菜單欄背景顏色。文字描述較為抽象，建議你一一調試並查看其效果，加深印象。
「list」下的代碼順序必須依次放置，不能隨便更改。
「pagePath」之後的文件名內，「.wxml」後綴被隱藏起來了，這是微信開發代碼中人性化的一點——幫你節約寫代碼的時間，無須頻繁聲明文件後綴。
「iconPath」為未獲得顯示頁面的圖標路徑，這兩個路徑可以直接是網路圖標。
「selectedIconPath」為當前顯示頁面高亮圖標路徑，可以去掉，去掉之後會默認顯示為「iconPath」的圖標。
「Text」為頁面標題，也可以去掉，去掉之後純顯示圖標，如只去掉其中一個，該位置會被佔用。
注意：微信的底部菜單最多支持五欄（五個 icons），所以在你設計微信應用的 UI 和基本架構時就要預先考慮好菜單欄的排布。

5. 根據以上代碼規則，我們做好了示例項目的基本架構，供你參考：

6. 「Json」文件配置好後，「card_course」的基本結構入上圖所示，不需要的子集都可以暫時刪除，缺少的子集則需要你主動新建。刪除子集時記得順帶檢查一下「app.json」里的相關內容是否已經一並刪除。
注意：個人建議你新建一個「wxml」文件的同時，把對應的「js」和「wxss」文件一起新建好，因為微信應用號的配置特點就是解析到一個「wxml」文件時，會同時在同級目錄下找到同文件名的「js」和「wxss」文件，所以「js」文件需及時在「app.json」里預先配置好。
編寫「wxml」時，根據微信應用號提供的介面編碼即可，大部分就是以前的「div」，而現在就用「view」即可。需要用其它子集時，可以根據微信提供的介面酌情選擇。
使用「class」名來設置樣式，「id」名在這里基本沒有什麼用處。主要操作數據，不操作「dom」。

7. 以上是示例項目首頁的「wxml」編碼。從圖中就可以看出，實現一個頁面代碼量非常少。

8. 「Wxss」文件是引入的樣式文件，你也可以直接在裡面寫樣式，示例中採用的是引入方式：

9. 修改代碼後刷新一次，可以看到未設背景的「view」標簽直接變成了粉色。
注意：修改「wxml」和「wxss」下的內容後，直接 F5 刷新就能直接看到效果，修改「js」則需點擊重啟按鈕才能看到效果。

10. 另外，公共樣式可以在「app.wxss」里直接引用。

11. 「Js」文件需要在「app.json」文件的「page」里預先配置好。為了項目結構清晰化，在示例項目中的「index」首頁同級目錄新建其它四個頁面文件，具體如下：

經過以上步驟，案例中的五個底部菜單就全部配置完畢了。

如果你要入門的話，首先要掌握 js、html、css 知識。

然後可以通過查看微信公眾平台中的微信小程序開發教程來大概了解微信小程序的開發方式和調試方式， 官方的介紹還是比較簡單易懂的。

另外可以通過入門級的帖子http://www.gzbifang.com/newsshow.php?id=142 來了解具體開發流程。

以上~~
希望能給你一些幫助，希望採納·

Ⅳ 微信小程序開發系列 (四) ：微信小程序的頁面跳轉路由設計

筆者由於工作需要，曾經參加過一個微信小程序同 SAP 系統集成的項目，因此從零開始學習了微信小程序的開發知識。這里通過系列文章把自己所學分享出來，希望對相關學習者有所幫助。

本教程前面三篇文章：

通過本系列前面三篇文章的介紹，大家對微信小程序的視圖和控制器，微信調試器的用法，以及如何消費微信平台提供的 Public API，已經有了一個最基本的認識了。在這個基礎上，本文讓我們進一步學習微信小程序的頁面跳轉路由設計。

這個系列教程的前六篇文章我們都在單個的視圖上操作。現在讓我們創建第二個視圖，然後實現從第一個視圖到第二個視圖的跳轉。
首先開發第二個視圖：

做過 Angular 開發的朋友們對上面的視圖設計一定不會陌生。這個視圖的數據源由模型 logs 提供，是一個列表結果，列表每個元素的數據源是模型 logs 里的一條記錄，用 log 代表。

為了讓 log 看起來顯示更整齊，在 log 內容之前，顯示每條 log 的索引。因為 log 的索引從 0 開始，所以用 {{index + 1}} 在索引前加一，這樣顯示的索引更符合普通人的閱讀習慣。

這個視圖的控制器：

控制器 logs.js 的實現：

在控制器里調用 Page 構造函數，給當前控制器指定名為 logs 的數據模型。
這個數據模型的值填充，通過微信框架提供的 API wx.getStorageSync 來獲取。

wx.getStorageSync 的含義在微信小程序 官網 上有定義：從本地緩存中同步獲取指定 key 對應的內容。

第二個視圖的 UI 和控制器都開發完畢，剩下的事情就是在第一個視圖里定義一個觸發點，讓它能觸發到第二個視圖的跳轉。
我在第一個視圖上通過屬性 bindtap 綁定了一個點擊函數 bindViewTap :

bindViewTap 在第一個控制器 index.js 里的實現：

跳轉還是通過微信小程序提供的 API wx.navigateTo :

保留當前頁面，跳轉到應用內的某個頁面，使用 wx.navigateBack 可以返回到原頁面。

學習了微信小程序頁面路由跳轉之後，我們來進行一個實際的需求開發。

效果：我在手機上打開微信小程序，自動顯示出我當前所在的地理位置：

具體步驟：

ReservationService.getGeocode 的實現：

看下面一個使用高德地圖 API 將經緯度轉換成文字描述的地址的例子，使用 postman 發送請求：

API 響應：

假設我用 vue 開發了一個 web 應用,需要在手機微信里訪問並調試, 可以按照本文介紹的步驟,使用微信開發者工具來調試。

假設我的 web 應用的訪問入口是如下公眾號菜單的"預約"按鈕:

那麼為了能夠在微信開發者工具里調試,需要首先進入該公眾號的後台,在 web 開發者工具里,將開發者本人的微信號添加進去:

點擊"綁定開發者賬號":

輸入待綁定的微信賬號:

點擊綁定,該微信號會收到一條消息,詢問是否綁定:

點擊同意操作完成綁定。

接下來, 把要調試的 web 應用的 url 放到微信開發者工具地址欄里，回車之後，微信開發者工具就會彈出一個詢問窗口，點擊 Allow 之後，就可以在微信開發者工具提供的類似 Chrome 開發者工具調試器一樣的界面里進行單步調試了。

這個粘貼到地址欄的 url 很有講究。

https://open.weixin.qq.com/connect/oauth2/authorize?appid=yyyy&redirect_uri=https%3a%2f%2fwww.xxx.com%2fsmart&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect

其中 appid= 後面的值，是從微信公眾號控制台里拷貝出來的 appid ：

redirect_uri, 即為我們開發的 web 應用，部署到伺服器之後生成的 url，需要經過 url encode 處理：

https://www.xxx.com/smart
這個 url 准備好之後，將其粘貼到微信開發者工具地址欄里，回車，即可看到一個對話窗口，要求獲得我們公開信息的許可：

點擊 Allow 之後，就可以像使用 Chrome 開發者工具的調試器一樣，在微信開發者工具里進行單步調試了：

本文首先介紹了微信小程序多頁面內的路由跳轉設計，接著通過獲得手機當前經緯度並轉換成地址的需求實現，進一步深入了解了微信小程序如何消費微信平台提供 Public API 的方法。

本教程前面三篇文章：

Ⅵ 微信小程序webview跳轉小程序內路由

微信小程序是一種全新的連接用戶與服務的方式，它可以在微信內被便捷地獲取和傳播，同時具有出色的使用體驗。同時提供一系列工具幫助開發者快速接入並完成小程序開發。關於如何注冊配置就不多言了，本文主要還是體驗了下 web-view 的功能。

有了這個組件之後，小程序可以很好的嵌入一些頁面，可以環境小程序 size 告急的問題，同樣也使開發更加便捷，畢竟小程序開發者基本都對前端開發較為了解。

說再多還是需要去看官方文檔， web-view文檔 ,

首先就需要注意：兼容問題， 版本庫和對應版本比例

目前而言，基本 80% 的用戶會升級微信，所以其實不必擔心版本問題，官方截止 2017-12-01 提供的數據也說明 88% 的用戶支持 web-view 。

web-view 組件是一個可以用來承載網頁的容器，會自動鋪滿整個小程序頁面；

屬性： src 是 String 類型，是一個網站的 url ，默認值是 none ， webview 指向網頁的鏈接。需登錄小程序管理後台配置域名白名單。

可以配合 Page 實例的 onLoad 方法來獲取 url 的具體值，也就是一個微信小程序頁面中只有一個 web-view ，但是這個 web-view 的內容可以根據上一個頁面傳遞的參數來獲取頁面 URL ，後面會講如何實踐，

官方提供如下介面：

1. 由小程序到 web-view ,其實本質上 WEB-VIEW 也是小程序的一個頁面，所以小程序到 web-view 是正常的小程序間的通信，通過 wx.navigateTo 、 wx.redirectTo ，帶上 url 參數, query 參數就像正常 url 的參數一樣跟著後面，然後在 web-view 的頁面的 Page 實例裡面通過 onLoad 的方法的參數來獲取 url 的值，設置給 web-view 的 src 屬性為改值即可。
2. 由 web-view 到小程序，由於在 web-view 的跳轉通常是在 src 對應的網頁中的操作來處理的，所以需要結合 jssdk 來處理，不需要 wx.config 配置，直接通過 script 標簽來引入 [https://res.wx.qq.com/open/js/jweixin-1.3.0.js](http://link.hu.com/?target=https%3A//res.wx.qq.com/open/js/jweixin-1.3.0.js) ，就可以使用 wx.miniProgram.navigateTo 、 wx.miniProgram.navigateBack 、 wx.miniProgram.switchTab 、 wx.miniProgram.reLaunch 、 wx.miniProgram.redirectTo 介面，就像小程序之間的跳轉一樣，單是只能在當前小程序頁面內跳轉。

// web-view下的頁面內 console.log(window.__wxjs_environment === 'miniprogram') // true

在目前實踐了部分 web-view 的功能，

在這個 web-view 中，指向的就是 https://test.com 的內容，所以在在 https://test.com 中跳轉出回到小程序，需要修改 https://test.com 中的 JavaScript ,

如果需要使用一些其他的的 jssdk 的方法，那就需要參照公眾號的開發配置了。

由於很多使用中的一些問題

Ⅶ 零基礎學習微信小程序開發，之前需要學習哪些知識，謝謝

首先，個人認為拖拽類生成小程序不屬於真正的開發小程序，使用編程的方式實現，才屬於真正意義上的開發。

從0開始入門，當然要從最基礎的內容開始入手。

先下載一個「微信開發者工具」

下載地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

一、html知識，微信內又名wxml

學習html，最好的方式就是動手寫一下。直接把實例復制到開發者工具中使用並嘗試調整參數。這部分內容很容易理解，嘗試一兩次，就可以入門。可以先從view，swiper，text，button入手。這幾個屬於高頻率使用的元素組件。

參考鏈接：https://developers.weixin.qq.com/miniprogram/dev/component/

二、css

樣式修改，屬於開發中關鍵的一步。要實現絢爛多彩的小程序，必須經過樣式的修改。可以先從display,position,font,color,background,border等屬性入手，可以實現大部分的樣式修改需求。

參考鏈接：https://www.w3school.com.cn/css/index.asp

三、javascript（簡稱js）

剛入門只需要了解最基礎的語法，可以跟著教程一步步走一遍。對變數，運算符，函數，對象，事件有一個基礎的了解。這時需要注意報錯信息，因為剛入門的同學，容易寫錯語法。注意

輸入法，一定不可用中文的標點符號，不然就會造成報錯。理解js的語言特性，什麼是事件驅動，什麼是單線程非同步。

參考鏈接： https://www.w3school.com.cn/js/index.asp

四、小程序特性

主要從微信小程序的官方文檔中學習。了解常用的api，比如路由跳轉，網路請求，數據緩存等，還要了解全局的配置，頁面配置，和小程序的生命周期。理解整個小程序從初始化到銷毀的整個過程。

參考鏈接：https://developers.weixin.qq.com/miniprogram/dev/api/

五、後端服務

個人建議先從雲開發入手，雖說沒有後端開發的經驗，雲開發可能學起來有點吃力。但總體而言，雲開發會比常規的後端開發要簡便得多。從微信官方文檔中學習：雲函數，資料庫，儲存，和雲調用。放心，這里使用的語言也是js。

雲開發參考地址：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html

而且可以配合使用騰訊雲的cms後台系統https://cloud.tencent.com/document/proct/1220/47065，實現一般的內容系統的快速開發。

到了後期的進階，也可以先從nodejs的搭建開始入手學習。

感謝您的閱讀，如果文章對你幫助，請不要吝嗇你的贊贊贊！

若有定製需求或更多小程序開發干貨： 火貓網路

Ⅷ 如何用微信小程序設置路由器密碼

用微信小程序設置路由器密碼，只要自己知道賬號密碼在瀏覽器登錄就可以了，修改密碼就好了。

Ⅸ 微信小程序怎麼開發

第一章：准備工作
做好准備工作很重要。開發一個微信應用號，你需要提前到微信的官方網站下載開發者工具。
1.下載最新微信開發者工具，打開後你會看到該界面：
2. 點擊「新建 web+」項目
3. 該頁面內的各項內容需要注意——
AppID：依照官方解釋來填。
Appname: 項目最外層文件夾名稱，如你將其命名為「ABC」，則之後的全部項目內容均將保存在「/ABC/…」目錄下。
本地開發目錄：項目存放在本地的目錄。
註：再次強調，如果你和團隊成員共同開發該項目，則建議你們使用同樣的目錄名稱及本地目錄，以確保協同開發的統一性。如果你之前已有項目，則導入過程與以上內容近似，不再贅述。
4. 准備工作全部完成後，點擊「新建項目」按鈕，彈出框點「確定」
5.此刻，微信開發者工具已經為你自動構建了一個初始的demo項目，該項目內包含了一個微信應用項目所需具備的基本內容和框架結構。點擊項目名稱（圖中即「cards」）進入該項目，就能看到整個項目的基本架構了：
第二章：項目構架
微信目前用戶群體非常龐大，微信推出公眾號以後，火爆程度大家都看得到，也同樣推動著 Html 5 的高速發展，隨著公眾號業務的需求越來越復雜，應用號現在的到來也是恰到好處。
微信提供給開發者的方式也在發生全面的改變：從操作 DOM 轉為操作數據，基於微信提供的一個過橋工具實現很多 Html 5 在公眾號很難實現的功能，有點類似於 hybrid 開發，不同於 hybrid 開發的方式是：微信開放的介面更為嚴謹，結構必須採用他提供給的組件，外部的框架和插件都不能在這里使用上，讓開發者完全脫離操作 DOM，開發思想轉變很大。
工欲善其事，必先利其器。理解它的核心功能非常重要，先了解它的整個運作流程。
生命周期：
在index.js裡面：
開發者工具上 Console 可以看到：
在首頁 console 可以看出順序是 App Launch–>App Show–>onLoad–>onShow–>onReady。
首先是整個 app 的啟動與顯示，app 的啟動在 app.js 裡面可以配置，其次再進入到各個頁面的載入顯示等等。可以想像到這里可以處理很多東西了，如載入框之類的都可以實現等等。
路由：
路由在項目開發中一直是個核心點，在這里其實微信對路由的介紹很少，可見微信在路由方面經過很好的封裝，也提供三個跳轉方法。
wx.navigateTo(OBJECT)：保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面。
wx.redirectTo(OBJECT)：關閉當前頁面，跳轉到應用內的某個頁面。
wx.navigateBack()：關閉當前頁面，回退前一頁面。
這三個基本上使用足夠，在路由方面微信封裝的很好，開發者根本不用去配置路由，往往很多框架在路由方面配置很繁瑣。
組件：
此次微信在組件提供方面也是非常全面，基本上滿足項目需求，故而開發速度非常快，開發前可以認真瀏覽幾次，開發效率會很好。
其它：
任何外部框架以及插件基本上無法使用，就算原生的 js 插件也很難使用，因為以前的 js 插件也基本上全部是一操作 dom 的形式存在，而微信應用號此次的架構是不允許操作任何 dom，就連以前開發者們習慣使用的動態設置的rem.js也是不支持的。