微信小程序簡單入門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 中相同的選擇器。