參考文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 1 ?創(chuàng)建項(xiàng)目 開發(fā)者工具安裝完成后，打開并使用微信掃碼登錄。選擇創(chuàng)建“項(xiàng)目”，填入上文獲取到的 AppID ，（無appid直接選擇）設(shè)置一個(gè)本地項(xiàng)目的名稱（非小程序名稱），比如“我的第一個(gè)項(xiàng)目”，并選擇一個(gè)本地的文件夾作為代碼存儲(chǔ)的目錄，點(diǎn)擊“新建項(xiàng)目”就可以了。 為方便初學(xué)者了解微信小程序的基本代碼結(jié)構(gòu)，在創(chuàng)建過程中，如果選擇的本地文件夾是個(gè)空文件夾，開發(fā)者工具會(huì)提示，是否需要?jiǎng)?chuàng)建一個(gè) quick start 項(xiàng)目。選擇“是”，開發(fā)者工具會(huì)幫助我們?cè)陂_發(fā)目錄里生成一個(gè)簡(jiǎn)單的 demo。

?

2 創(chuàng)建頁面 目錄結(jié)構(gòu) 我們有兩個(gè)頁面，index 頁面和 logs 頁面，即歡迎頁和小程序啟動(dòng)日志的展示頁，他們都在 pages 目錄下。微信小程序中的每一個(gè)頁面的【路徑+頁面名】都需要寫在 app.json 的 pages 中，且 pages 中的第一個(gè)頁面是小程序的首頁。 utils：入口文件

3 邏輯層 代碼結(jié)構(gòu) index.wxml是xml格式，用于界面布局,類似于html，很多標(biāo)簽直接使用的就是html標(biāo)簽； <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">駐馬店位于河南中南部北接漯河南臨信陽地處淮河上游的丘陵平原地區(qū),
,因歷史上南來北往的信使,官宦在此駐驛歇馬而得名,駐馬店承東啟西,貫?zāi)贤ū?素有豫州之腹地,
天下之最中的美稱.
</view>
<view class="close" bindtap="closepage"> 返回 </view>
</view> view標(biāo)簽相當(dāng)于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文件，定義了事件處理過程(是小程序的腳本代碼。我們可以在這個(gè)文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量。)。將界面布局與處理代碼分離，看起來比較干凈簡(jiǎn)單。 //app.js
App({
onLaunch: function () {
//調(diào)用API從本地緩存中獲取數(shù)據(jù)
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{
//調(diào)用登錄接口
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 是對(duì)整個(gè)小程序的全局配置。我們可以在這個(gè)文件中配置小程序是由哪些頁面組成，配置小程序的窗口背景色，配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題。注意該文件不可添加任何注釋。 {
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
} 注冊(cè)頁面 每個(gè)頁面必須在此處注冊(cè)，不然無法編譯 做個(gè)小頁面 1，建一個(gè)新頁面 建.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">聯(lián)系方式</view>
<view>地址:</view>
<view>聯(lián)系電話：</view>
<view>商務(wù)合作：</view>
</view>
</view> 建.js(必須有） //獲取應(yīng)用實(shí)例
var app = getApp()
Page({
data: {
motto: 'Hello',
userInfo: {}
},
//事件處理函數(shù)
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
app.getUserInfo(function(userInfo){
//更新數(shù)據(jù)
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;
} 關(guān)于樣式： 尺寸單位

• rpx（responsive pixel）: 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

rem（root em）: 規(guī)定屏幕寬度為20rem；1rem = (750/20)rpx? 外部樣式引入： 使用語句可以導(dǎo)入外聯(lián)樣式表，后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用表示語句結(jié)束。 示例代碼： /** common.wxss **/
.small-p {
padding:5px;
} /** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
} 內(nèi)聯(lián)樣式：

• style：靜態(tài)的樣式統(tǒng)一寫到 class 中。style 接收動(dòng)態(tài)的樣式，在運(yùn)行時(shí)會(huì)進(jìn)行解析，請(qǐng)盡量避免將靜態(tài)的樣式寫進(jìn) style 中，以免影響渲染速度。

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

注意：小程序里面對(duì)于代碼規(guī)范很嚴(yán)格，空標(biāo)記必須有結(jié)束標(biāo)記，結(jié)束時(shí)分號(hào)等必須寫完整，不然報(bào)錯(cuò) 全局樣式與局部樣式 定義在 app.wxss 中的樣式為全局樣式，作用于每一個(gè)頁面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對(duì)應(yīng)的頁面，并會(huì)覆蓋 app.wxss 中相同的選擇器。

轉(zhuǎn)載于:https://www.cnblogs.com/wyfeng1/p/6028295.html

總結(jié)

以上是生活随笔為你收集整理的微信小程序简单入门1的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。