今天前幾天微信將小程序開發(fā)者工具內(nèi)的云托管升級(jí)為微信云托管，新增了很多諸如OpenApi、MySql數(shù)據(jù)庫、流水線構(gòu)建、web控制臺(tái)等能力?？次臋n還是蠻激動(dòng)的，對開發(fā)者來說確實(shí)是個(gè)好消息，因?yàn)橹暗囊恍I(yè)務(wù)邏輯大都寫在云函數(shù)或者部署在服務(wù)器里面，要管理好幾套。看了這次發(fā)布的微信云托管有點(diǎn)動(dòng)心要做一個(gè)遷移，微信云托管相比其它模式來說還是很有優(yōu)勢和前景的。關(guān)于微信云托管和云函數(shù)以及服務(wù)器、Kubernetes的對比大家看這個(gè)鏈接就夠了：https://developers.weixin.qq.com/miniprogram/dev/wxcloudrun/src/basic/intro.html 這次先拿一個(gè)小demo練手。話不多說，出于好奇心，今天帶大家來體驗(yàn)一把： ?第一步：開通環(huán)境 首先登陸微信云托管創(chuàng)建環(huán)境，微信云托管的地址為：https://cloud.weixin.qq.com/ 首先需要?jiǎng)?chuàng)建一個(gè)環(huán)境，創(chuàng)建環(huán)境分為系統(tǒng)創(chuàng)建和私人網(wǎng)絡(luò)，選擇私人網(wǎng)絡(luò)會(huì)羅列出該小程序?qū)?yīng)的騰訊云賬號(hào)之前創(chuàng)建過的環(huán)境，在這里我選擇了私人網(wǎng)絡(luò)里面和我目前小程序使用的相同環(huán)境。 這次咱們也看看mysql，微信云托管相比之前增加了MySql服務(wù)，開通也是非常方便。如下圖所示簡單幾步就可以開通成功了并且支持自動(dòng)暫停： 開通之后是這樣滴，支持內(nèi)外網(wǎng)訪問數(shù)據(jù)庫，并且提供自動(dòng)暫停服務(wù)，閑置的時(shí)候就幫你暫停了。 由于項(xiàng)目中需要使用到“云調(diào)用”獲取小程序碼的服務(wù)，所以這里安裝一下微信云托管提供的OpenApi,這里一定要注意如果要使用“云調(diào)用”服務(wù)，微信令牌權(quán)限設(shè)置這里一定是要把要使用的接口先添加到白名單的。 小tips:大家在使用OpenApi接口的時(shí)候測試開發(fā)中可以把公網(wǎng)域名訪問打開，線上環(huán)境啟動(dòng)內(nèi)網(wǎng)訪問就可以，這樣相對比較安全。因?yàn)槟阏{(diào)用OpenApi的接口不再像之前需要換取Access_Token啦，公網(wǎng)暴露風(fēng)險(xiǎn)大。 ?第二步：新建服務(wù) 1.流水線發(fā)布 選擇流水線發(fā)布的話第一步需要新建流水線，選擇流水線發(fā)布的代碼中必須要包含container.config.json文件，關(guān)于寫法根據(jù)文檔自己定義即可：https://developers.weixin.qq.com/miniprogram/dev/wxcloudrun/src/basic/guide.html GitHub授權(quán)訪問之后并在倉庫中包含container.config.json文件，然后根據(jù)自己實(shí)際情況勾選其它配置以后這樣一條流水線就定義好了，當(dāng)代碼推送觸發(fā)main分支的時(shí)候就會(huì)自動(dòng)構(gòu)建鏡像，構(gòu)建好之后別忘了最后還要把最新版本部署發(fā)布，流水線不會(huì)自動(dòng)幫你去將最新版本發(fā)布上去的。 2.版本發(fā)布 版本發(fā)布也是很方便的，定義好Dockerfile文件之后可以在騰訊云個(gè)人倉庫構(gòu)建配置那里配置從GitHub拉取或者本地構(gòu)建好docker鏡像后推送到騰訊云。我這里選擇的是微信云托管代碼拉?。?/span> 在版本列表里面選擇新建版本，從代碼庫拉取，把我們寫好的程序拉取下來： 代碼拉取之后會(huì)在微信云托管自動(dòng)幫助我們構(gòu)建鏡像，點(diǎn)擊查看日志就可以看到詳細(xì)的構(gòu)建過程，又是熟悉的操作。 等版本構(gòu)建完畢之后，之后就是發(fā)布，無論是選擇流水線發(fā)布還是版本發(fā)布，最后一步一定要選擇發(fā)布上線。 ?第三步：開發(fā) 這里我創(chuàng)建一個(gè).Net Core項(xiàng)目，選擇WebApp模版。 接下來編輯Dockerfile文件： #See https:///containerfastmode to understand how Visual Studio uses this Dockerfile to build your images for faster debugging. FROM mcr.microsoft.com/dotnet/aspnet:3.1 AS base WORKDIR /app EXPOSE 80 FROM mcr.microsoft.com/dotnet/sdk:3.1 AS build WORKDIR /src COPY ["HtArtGoWebApp.csproj", "."] RUN dotnet restore "./HtArtGoWebApp.csproj" COPY . . WORKDIR "/src/." RUN dotnet build "HtArtGoWebApp.csproj" -c Release -o /app/build FROM build AS publish RUN dotnet publish "HtArtGoWebApp.csproj" -c Release -o /app/publish FROM base AS final WORKDIR /app COPY --from=publish /app/publish . ENTRYPOINT ["dotnet", "HtArtGoWebApp.dll"] 然后安裝數(shù)據(jù)庫驅(qū)動(dòng) <packagereference </packagereferenceInclude="FreeSql" Version="2.5.200" /> <packagereference </packagereferenceInclude="FreeSql.Provider.MySql" Version="2.5.200" /> 之后是注入FreeSql以及定義實(shí)體,先定義實(shí)體，我在項(xiàng)目中新建了Models文件夾，實(shí)體都放在Models文件夾中,首先定義一個(gè)基礎(chǔ)類BaseEntity.cs public class BaseEntitywhere TKey : IEquatable { [Column(IsPrimary = true, IsIdentity = true)] public TKey Id { get; set; } [Column(ServerTime = DateTimeKind.Utc, CanUpdate = false)] public DateTime CreateTime { get; set; } [Column(ServerTime = DateTimeKind.Utc)] public DateTime UpdateTime { get; set; } public string OperatorId { get; set; } public bool IsDelete { get; set; } public bool Status { get; set; } } 之后定義一個(gè)用于測試的類Exhibitions.cs類，讓它繼承BaseEntity，主鍵可以自定義類型： public class Exhbitions:BaseEntity { public string Title { get; set; } } 接下來就是FreeSql的配置以及注入，在Stratup.cs文件里面進(jìn)行注入： public Startup(IConfiguration configuration) { Configuration = configuration; //FreeSql配置 fsql = new FreeSql.FreeSqlBuilder() //鏈接字符串 .UseConnectionString(FreeSql.DataType.MySql, Configuration.GetConnectionString("MySql")) //自動(dòng)同步實(shí)體打開 .UseAutoSyncStructure(true) //SQL日志也打開 .UseMonitorCommand(cmd => Console.WriteLine(cmd.CommandText)) .Build(); } public IConfiguration Configuration { get; } public IFreeSql fsql; 最后在ConfigureServices里面進(jìn)行注入一下，注入方式為單例模式：services.AddSingleton(fsql) 這樣數(shù)據(jù)庫部分就配置注入成功了，然后就是調(diào)用數(shù)據(jù)庫查詢數(shù)據(jù)了，選一個(gè)Index.cshtml頁面進(jìn)行數(shù)據(jù)查詢展示： public class IndexModel : PageModel { private readonly ILogger_logger; private IFreeSql _freeSql; //前端要展示的數(shù)據(jù)定義為屬性 public IListExhbitionListList { get; set; } public IndexModel(ILoggerlogger,IFreeSql freeSql) { _logger = logger; _freeSql = freeSql; } //頁面初始化的時(shí)候查詢數(shù)據(jù) public async Task OnGetAsync() { var data = await _freeSql.Select().ToListAsync(); //賦值 ExhbitionListList = data; } } 在前端Index.cshtml用一個(gè)table展示:
@foreach (var item in this.Model.ExhbitionListList) {
} 以上是數(shù)據(jù)庫部分，接下來咱們使用微信云托管的OpenApi進(jìn)行調(diào)用,關(guān)于OpenApi的部分放在RestService文件夾里面的OpenApiService類中 這個(gè)文件夾里面我只寫了一個(gè)獲取小程序碼的接口用于測試，代碼如下： public class OpenApiService { private HttpClient _client; public OpenApiService(HttpClient client) { client.BaseAddress = new Uri( "http://替換成大家自己的"); _client = client; } public async TaskGetgetUnlimited() { var body = new StringContent(JsonSerializer.Serialize(new { scene = "index", page = "pages/index/index" }), Encoding.UTF8, "application/json"); var response = await _client.PostAsync("/wxa/getwxacodeunlimit", body); if (response.IsSuccessStatusCode) { MemoryStream ms = new MemoryStream(); await response.Content.CopyToAsync(ms); return ms; } return null; } } 然后在ConfigureService中注入一下:services.AddHttpClient(); 調(diào)用該服務(wù)我們寫一個(gè)Controller接口供前端調(diào)用,這里要在Startup.cs里面配置兩處：
配置好之后在控制器里面調(diào)用即可： [ApiController] [Route("api/[controller]")] public class WxController : Controller { private OpenApiService _openApiService; public WxController(OpenApiService openApiService) { _openApiService = openApiService; } [HttpGet] public async TaskGetgetUnlimited() { var data = await _openApiService.GetgetUnlimited(); return new FileContentResult(data.ToArray(), "image/jpeg"); } } 這里別忘了在微信云托管將獲取小程序碼的接口添加白名單：
好啦，到這里代碼部分就結(jié)束了。先在本地調(diào)試一遍沒問題就發(fā)布啦： 獲取小程序碼正常 數(shù)據(jù)庫訪問正常 頁面看起來有點(diǎn)丑，用Vue和ElementUI 優(yōu)化一下首頁,在_Layout.cshtml中引入Vue和ElementUI的相關(guān)庫，然后在前端Index.cshtml.cs中做如下修改: public class IndexModel : PageModel { private readonly ILogger_logger; private IFreeSql _freeSql; public IListExhbitionListList { get; set; } public IndexModel(ILoggerlogger,IFreeSql freeSql) { _logger = logger; _freeSql = freeSql; } // public async Task OnGetAsync() // { // var data = await _freeSql.Select().ToListAsync(); // ExhbitionListList = data; // } public async TaskOnGetList() { var data = await _freeSql.Select().ToListAsync(); return new JsonResult(data); } } Html頁面中用element的Table組件優(yōu)化一下： <el-table< span=""></el-table<> :data="list" border style="width: 100%"> <el-table-column< span=""></el-table-column<> fixed prop="id" label="id" > <el-table-column< span=""></el-table-column<> prop="title" label="標(biāo)題" > <el-table-column< span=""></el-table-column<> prop="createTime" label="創(chuàng)建時(shí)間" > <el-table-column< span=""></el-table-column<> fixed="right" label="操作" width="100"> <template </templateslot-scope="scope"> <el-button </el-buttonv-on:click="handleClick(scope.row)" type="text" size="small">查看 <el-button </el-buttontype="text" size="small">編輯 @section Scripts { <script </scripttype="text/javascript"> var app=new Vue({ el:'#app', data:{ title:'主頁', list:[] }, async created(){ const list= await this.loadData(); this.list = list }, methods:{ loadData(){ return new Promise(((resolve, reject) => $.ajax({ url:'?handler=List', success:(res)=>{ resolve(res) },fail:(err)=>{ reject(err) } }) )) }, handleClick(row) { console.log(row); } } }) } 呈現(xiàn)出來的頁面如下所示，以后再把CURD相關(guān)操作添加上:
然后添加一個(gè)API管理工具Swagger,在這里為了演示添加一個(gè)最簡易配置的的Swagger,添加Swagger首先需要在Nuget上面安裝Swagger的包Swashbuckle.AspNetCore。之后在ConfigureServices方法中注入services.AddSwaggerGen();，在Configure里面注冊Swagger中間件：app.UseSwagger(); app.UseSwaggerUI(c=>{c.SwaggerEndpoint("/swagger/v1/swagger.json", "My API V1");}); 然后訪問localhost:5000//swagger/index.html即可
最后發(fā)布上線之后也一切正常，感覺未來可期，日志查詢也非常方便，這個(gè)必須贊：
?總結(jié) 總結(jié)起來微信云托管這個(gè)方向很好，很適合快速開發(fā)驗(yàn)證業(yè)務(wù)模型，希望后期盡快支持環(huán)境共享、自定義域名等，后續(xù)還有第二篇將如何將CMS接入項(xiàng)目中來，大家敬請期待～ |
|
|
