微信小程序簡單入門1

參考文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html

1  建立項目

開發者工具安裝完成後，打開並使用微信掃碼登陸。選擇建立「項目」，填入上文獲取到的 AppID ，（無appid直接選擇）設置一個本地項目的名稱（非小程序名稱），好比「個人第一個項目」，並選擇一個本地的文件夾做爲代碼存儲的目錄，點擊「新建項目」就能夠了。

爲方便初學者瞭解微信小程序的基本代碼結構，在建立過程當中，若是選擇的本地文件夾是個空文件夾，開發者工具會提示，是否須要建立一個 quick start 項目。選擇「是」，開發者工具會幫助咱們在開發目錄裏生成一個簡單的 demo。

 

2 建立頁面

目錄結構

咱們有兩個頁面，index 頁面和 logs 頁面，即歡迎頁和小程序啓動日誌的展現頁，他們都在 pages 目錄下。微信小程序中的每個頁面的【路徑+頁面名】都須要寫在 app.json 的 pages 中，且 pages 中的第一個頁面是小程序的首頁。

utils：入口文件

 

3 邏輯層

代碼結構

index.wxml是xml格式，用於界面佈局,相似於html，不少標籤直接使用的就是html標籤；

<view class="warp">

<view class="title">aaaaaaa</view>
<view class="cTime">2016-10-25 14:28</view>
<view class="img"><image src="../../images/1.png" 
class="in-img" background-size="cover" model="scaleToFill"></image></view>
<view class="content">駐馬店位於河南中南部北接漯河南臨信陽地處淮河上游的丘陵平原地區,
,因歷史上南來北往的信使,官宦在此駐驛歇馬而得名,駐馬店承東啓西,貫南通北,素有豫州之腹地,
天下之最中的美稱.
</view>
<view class="close" bindtap="closepage"> 返回 </view>
</view>

view標籤至關於div；

index.wxss是css樣式定義，語法與css是同樣的;

/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}

index.js是js文件，定義了事件處理過程(是小程序的腳本代碼。咱們能夠在這個文件中監聽並處理小程序的生命週期函數、聲明全局變量。)。將界面佈局與處理代碼分離，看起來比較乾淨簡單。

//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"
}
}

註冊頁面

每一個頁面必須在此處註冊，否則沒法編譯

作個小頁面

1，建一個新頁面

建.wxml文件

<view class="about">
<view class="about-wei">
<view class="about-img"><image src="" class="in-img" background-size="cover" model="scaleToFill"></image></view>
<view class="about-title">千峯科技有限公司</view>
</view>
<view class="about-content">駐馬店位於河南中南部北接漯河南臨信陽地處淮河上游</view>

<view class="about-addr">
<view class="about-tab">聯繫方式</view>
<view>地址:</view>
<view>聯繫電話：</view>
<view>商務合做：</view>
</view>
</view>

建.js(必須有）

//獲取應用實例
var app = getApp()
Page({
data: {
motto: 'Hello',
userInfo: {}
},
//事件處理函數
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//調用應用實例的方法獲取全局數據
app.getUserInfo(function(userInfo){
//更新數據
that.setData({
userInfo:userInfo
})
})
}
})

樣式控制.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;
}

關於樣式：

尺寸單位

• rpx（responsive pixel）: 能夠根據屏幕寬度進行自適應。規定屏幕寬爲750rpx。如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

rem（root em）: 規定屏幕寬度爲20rem；1rem = (750/20)rpx 

外部樣式引入：

使用語句能夠導入外聯樣式表，後跟須要導入的外聯樣式表的相對路徑，用 表示語句結束。

示例代碼：

/** common.wxss **/
.small-p {
padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}

內聯樣式：

• style：靜態的樣式統一寫到 class 中。style 接收動態的樣式，在運行時會進行解析，請儘可能避免將靜態的樣式寫進 style 中，以避免影響渲染速度。

<view style="color:red;" />

注意：小程序裏面對於代碼規範很嚴格，空標記必須有結束標記，結束時分號等必須寫完整，否則報錯

全局樣式與局部樣式

定義在 app.wxss 中的樣式爲全局樣式，做用於每個頁面。在 page 的 wxss 文件中定義的樣式爲局部樣式，只做用在對應的頁面，並會覆蓋 app.wxss 中相同的選擇器。