This time I will bring you a detailed introduction to the development and use of WeChat mini programs. What are the precautions for getting started with the development of WeChat mini programs? The following is a practical case, let’s take a look.

WeChat mini programs have been popular for some time, and I have been paying attention to them before. Judging from the development in the past six months, most companies are still unwilling to convert their main business to native APPs. Put it on the WeChat platform to avoid being restricted by Tencent. However, the application scenarios of mini programs (on-and-off and QR code distribution, etc.) are still worth learning. If you understand React technically, you will find that they are componentizing There are a lot of similarities above. To put it bluntly, mini programs are H5 light applications based on the WeChat platform. WeChat encapsulates the underlying functions of the system (device, location, media, files, etc.) and WeChat’s own functions (login, payment, sharing, etc.) into corresponding API is used by small programs to call.

I have written a DOME based on the official documentation, using the Zephyr Weather Open API interface to implement weather forecast. It is only for learning and communication, thank you~

1. Mini Program Basic concepts

1. Development tools: In order to cooperate with the development of mini programs, WeChat is specially equipped with its own development tools, and you can choose the corresponding version to install.

#2. Create a project application: After the installation is complete, open it and scan the QR code to log in. Publishing mini programs requires an enterprise-level certified official account, so personal subscription accounts cannot be published. So I choose no AppID here, select a local empty folder to create the project, and check to create a quick start project to generate a demo.

3. Write a small program: the demo is initialized and contains some simple code files, of which app.js, app.json, and app.wxss are essential. At a minimum, the applet will read these files to initialize the instance.

App.js is the initialization script of the mini program. In this file, you can monitor the life cycle of the mini program, apply for global variables and call APIs, etc.

app.json is the global view of the mini program. Configuration, pages sets the page path composition (the first one is the homepage by default), window sets the window performance of the default page, etc.

App.wxss is the common style sheet for the entire applet. Similar to common.css in website development

4. Create a page: In the pages directory, it consists of four files of different types with the same name in a folder. .js is a script file, .json is a configuration file, .wxss is a style sheet file, .wxml is a page Structure file , of which json and wxss files are optional ( will inherit the app’s json and wxss default settings by default ).

2. Mini Program Framework

1. Mini Program Configuration

app.json is mainly divided into five parts: pages: page group , window: frame style (status bar, navigation bar, title, window background color), tabBar: bottom menu, networkTimeout: network timeout setting, debug: turn on debug mode

Page.json is set individually for the page, cascading Remove the global settings of app.json

##

"pages""pages/index/index""pages/logs/logs""window""backgroundTextStyle":"light""navigationBarBackgroundColor":?"#000""navigationBarTitleText":?"WeChat""navigationBarTextStyle":"white"

2. The logic of the mini program

Use App() to register a small program. It must be registered in

app.js, and multiple

cannot be registered.

App({//如下為小程序的生命周期
??onLaunch:?function()?{?},//監(jiān)聽初始化
??onShow:?function()?{??},//監(jiān)聽顯示（進(jìn)入前臺(tái)）
??onHide:?function()?{??},//監(jiān)聽隱藏（進(jìn)入后臺(tái)：按home離開微信）
??onError:?function(msg)?{??},//監(jiān)聽錯(cuò)誤
??//如下為自定義的全局方法和全局變量??
??globalFun:function(){},
??globalData:?'I?am?global?data'})

Use Page() to register a page and register it in the js file of each page

Page({
??data:?{text:?"This?is?page?data."},//頁面數(shù)據(jù)，用來維護(hù)視圖，json格式
??onLoad:?function(options)?{??},//監(jiān)聽加載
??onReady:?function()?{??},//監(jiān)聽初次渲染完成
??onShow:?function()?{??},//監(jiān)聽顯示
??onHide:?function()?{??},//監(jiān)聽隱藏
??onUnload:?function()?{??},//監(jiān)聽卸載
??onPullDownRefresh:?function()?{??},//監(jiān)聽下拉
??onReachBottom:?function()?{??},//監(jiān)聽上拉觸底
??onShareAppMessage:?function?()?{??},//監(jiān)聽右上角分享
??//如下為自定義的事件處理函數(shù)（視圖中綁定的）
??viewTap:?function()?{//setData設(shè)置data值，同時(shí)將更新視圖
????this.setData({text:?'Set?some?data?for?updating?view.'})
??}
})

3. View and event binding of the mini program

In the wxml file in each page, perform data on the data in the page js Binding, and custom event binding

<!--{{}}綁定data中的指定數(shù)據(jù)并渲染到視圖--><view>{{text}}</view><!--wx:for獲取數(shù)組數(shù)據(jù)進(jìn)行循環(huán)渲染，item為數(shù)組的每項(xiàng)--><view>?{{item}}?</view><!--wx:if條件渲染--><view>?WEBVIEW?</view><view>?APP?</view><view>?MINA?</view><!--模板--><template>
??<view>FirstName:?{{firstName}},?LastName:?{{lastName}}</view></template><template></template><template></template><!--bindtap指定tap事件處理函數(shù)為ViewTap--><view>?點(diǎn)我點(diǎn)我?</view>

Page({
??data:?{//data數(shù)據(jù)主要用于視圖綁定
????text:"我是一條測(cè)試",
????array:[0,1,2,3,4],
????view:"APP",
????template:{
????????staffA:?{firstName:?'Hulk',?lastName:?'Hu'},
????????staffB:?{firstName:?'Shang',?lastName:?'You'}
????}
??},
??ViewTap:function(){console.log('額，點(diǎn)到我了了~')}//自定義事件，主要用于事件綁定})

4. Mini program style

In the wxss file in each page, style the structure in wxml, which is equivalent to css , extended the rpx unit. Among them, app.wxss defaults to the global style and affects all pages.

三、小程序?qū)崙?zhàn)-天氣預(yù)報(bào)（利用和風(fēng)天氣API）

先看看完成后的效果，一共三個(gè)頁面，測(cè)試demo不求美觀，不喜勿噴~

1、設(shè)置底部菜單和頁面

我們就在quick start生成的demo基礎(chǔ)上進(jìn)行修改即可，因?yàn)樯婕皥D標(biāo)icon，我們新建一個(gè)images文件夾來存放圖片

在原先pages文件夾中，刪除index和log頁面文件夾，新建weather、city、about三個(gè)頁面文件夾，及三個(gè)頁面對(duì)應(yīng)的四個(gè)文件類型，文件結(jié)構(gòu)如下圖

接下來配置app.json文件

/*app.json,該文件不能含有任何注釋，所以正式應(yīng)用需刪除所有注釋內(nèi)容*/{??"pages":[//小程序的頁面路徑數(shù)組，第一條默認(rèn)為首頁，所有頁面均需寫在這里，否則不能加載
????"pages/weather/weather",????"pages/about/about",????"pages/city/city"
??],??"window":{//小程序框架設(shè)置
????"navigationBarBackgroundColor":?"#000",????"navigationBarTitleText":?"天氣預(yù)報(bào)",????"navigationBarTextStyle":"#fff",????"backgroundColor":"#666",????"backgroundTextStyle":"light",????"enablePullDownRefresh":true
??},??"tabBar":?{//小程序底部菜單設(shè)置
????"color":?"#666",????"selectedColor":?"#56abe4",????"backgroundColor":?"#ddd",????"borderStyle":"black",????"list":?[{??????"pagePath":?"pages/weather/weather",??????"iconPath":?"images/tabbar/weather1.png",??????"selectedIconPath":?"images/tabbar/weather2.png",??????"text":?"天氣預(yù)報(bào)"
????},?{??????"pagePath":?"pages/city/city",??????"iconPath":?"images/tabbar/city1.png",??????"selectedIconPath":?"images/tabbar/city2.png",??????"text":?"設(shè)置城市"
????},?{??????"pagePath":?"pages/about/about",??????"iconPath":?"images/tabbar/about1.png",??????"selectedIconPath":?"images/tabbar/about2.png",??????"text":?"關(guān)于我"
????}],????"position":"bottom"
??}
}

2、注冊(cè)小程序和整體樣式

修改app.js和app.wxss兩個(gè)文件如下

//app.jsApp({??//1、系統(tǒng)事件部分
??onLaunch:?function?()?{//小程序初始化時(shí)執(zhí)行
????var?that=this;
????that.curid?=?wx.getStorageSync('curid')?||?that.curid;//API：獲取本地緩存，若不存在設(shè)置為全局屬性
????that.setlocal('curid',?that.curid);//調(diào)用全局方法??},??//2、自定義全局方法部分
??setlocal:function(id,val){
????wx.setStorageSync(id,?val);//API：設(shè)置本地緩存??},??//3、自定義全局屬性部分
??curid:"CN101010100",
??version:"1.0"})

/**app.wxss**/.container?{margin:?0;?padding:?0;}.title{font-size:?14px;?font-weight:?bold;}

3、頁面的結(jié)構(gòu)（wxml）、樣式（wxss）、邏輯（js）和配置（json）

小程序中的wxml摒棄了HTML標(biāo)簽， 改用view（類似p）、text（類似span）、icon等等，class同html指定樣式，bindtap綁定事件（類似onclick），該頁面無特殊配置，json文件內(nèi)容為空（非必須文件）

??
????當(dāng)前城市：{{basic.city}}
????{{basic.update.loc}}

/**weather.wxss**/.city?{padding:?3%?5%;?background:?#ddd;}.city?text{font-size:?16px;?color:?#666;}.city?.update{?font-size:?12px;?float:?right;}

?app?=?getApp();
??data:{cur_id:app.curid,basic:"",now:""},
??
??onShow:?that?=?'加載中',icon:?'loading',duration:?10000})
????that.getnow((d){="http://files.heweather.com/cond_icon/"+d.now.cond.code+".png"
??getnow:
??????url:?'https://free-api.heweather.com/v5/now''01a7798b060b468abdad006ea3de4713''Content-Type':?'application/json'(res)?{fn(res.data.HeWeather5[0]);}
??bindViewTap:(){wx.switchTab({url:?'../city/city'})}})

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

怎樣使用react內(nèi)swiper方法

怎樣使用seajs在require書寫約定

The above is the detailed content of Detailed introduction to getting started with WeChat mini program development. For more information, please follow other related articles on the PHP Chinese website!