微信小程序開發01

1、從0開發helloworld

從0開發hello,world,初始化一個項目，基本架構只留下pages文件夾和project.config.json。

現在我們著手寫hello,world!

1. 創建項目3個app基本文件： app.js/wxss/json
2. 創建about文件夾
3. 創建4個基本文件：about.js/wxml/wxss/json
4. 往文件里面寫東西

在完成上面基本文件的創建后，我們就要著手寫代碼了。json文件不能為空

首先，我們要對app.json進行操作：

{

  "pages": [

    "pages/about/about"   //指定訪問路由

  ]

}

接下來，進行hello,world的編寫：

about.wxml ------相當于html文件

<text class="info">hello,world!</text>

about.js

//創建一個page函數
page{
    
}

接下來保存編譯，hello,world就出來了

然后，進行樣式的修改：

找到about.wxss文件：

.info{
  /* text-align: center; */
  font-size: 30px;
  /* color: red; */
  font-weight: bold;
  /* padding: 30px auto; */
}

就可以定制自己的樣式了。

2、進行導航欄的編輯

找到about,json文件：

我們查看微信小程序官網開發文檔，https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html，發現我們只需要在自己的頁面對*.json文件進行修改，就可以對導航欄進行編輯：

配置項

頁面配置中只能設置 app.json 中 window 對應的配置項，以決定本頁面的窗口表現，所以無需寫 window 這個屬性。

配置示例

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

在模擬器中就可以顯示相應的樣式了。

3、view、text、image組件初探

text常見組件元素：

<text class="info" id="jay" style="" bindtap="f0" hiddeon="" data-user-name="user" >hello,world!</text>

image常見元素：

<image src="/images/a.jpg"></image>

容器：

在html中容器是： div

在wxml里是： view

4、快速實現基本布局

about.wxml:

<view class="container">
  <image src="/images/a.jpg"></image>
  <text>電影周周看</text>
  <text>每周推薦一部電影</text>
  <text>我的微博：xxx.weibo.com</text>
</view>

about.wxss:

.container{
  background-color: #eee;
  height: 100vh;
  text-align: center;
}

text{
  display: block;
}

iamge,text{
  margin-bottom: 60px; 
}

就實現了我們要想實現的布局，但問題產生了，只要我們的圖片變化，就會導致布局變化，舊的重新計算margin-bottom，這是非常不智能的。

注：

1.em

在做手機端的時候經常會用到的做字體的尺寸單位

說白了 em就相當于“倍”，比如設置當前的div的字體大小為1.5em，則當前的div的字體大小為：當前div繼承的字體大小*1.5

但是當div進行嵌套的時候，em始終是按照當前div繼承的字體大小來縮放，參照后面的例子。

2.rem

這里的r就是root的意思，意思是相對于根節點來進行縮放，當有嵌套關系的時候，嵌套關系的元素的字體大小始終按照根節點的字體大小進行縮放。

參照后面給的demo

3.vh

vh就是當前屏幕可見高度的1%，也就是說

height:100vh == height:100%;

但是有個好處是當元素沒有內容時候，設置height:100%該元素不會被撐開，

但是設置height:100vh，該元素會被撐開屏幕高度一致。

4.vw

vw就是當前屏幕寬度的1%

補充一句，當設置width:100%，被設置元素的寬度是按照父元素的寬度來設置，

但是100vw是相對于屏幕可見寬度來設置的，所以會出現50vw 比50%大的情況

所以，我們要使用flex布局：

.container{
  background-color: #eee;
  height: 100vh;
  /* text-align: center; */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

#img{
  height: 187.5rpx;
  width: 187.5rpx;
  border-radius: 100rpx;
}

5、添加頁面

添加頁面weekly:

同about頁面，需要在pages下創建一個文件夾weekly，并創建4個基本要素文件，由于本實例和about實例用到了相同的css代碼段，所以將其放在全局配置中：app.wxss

.container{
  background-color: #eee;
  height: 100vh;  //高度100%
  display: flex;  //采用flex布局
  flex-direction: column;   //方向采用垂直
  justify-content: space-around;  //相同間隔
  align-items: center; //居中
}

app.json全局配置文件：

{
  "pages": [
    "pages/about/about",
    "pages/weekly/weekly"
  ]
}

想要那個做主頁，就把哪個連接放前面。

現在我們要完成一個簡單的功能，在about頁面上，給每周推薦加上navigator,實現頁面間的跳轉。

在about.wxml中：

<view class="container">
  <image src="/images/a.jpg" id="img"></image>
  <text>電影周周看</text>
  <view>
    <text>我</text> <navigator url="/pages/weekly/weekly" style='display: inline;' open-type="navigate" hover-class="nav-hover" class="nav-default">每周推薦</navigator><text>一部電影</text>
  </view>
  <text>我的微博：xxx.weibo.com</text>
</view>

在這里，主要講解如下代碼段：

  <view>
    <text>我</text> <navigator url="/pages/weekly/weekly" style='display: inline;' open-type="navigate" hover-class="nav-hover" class="nav-default">每周推薦</navigator><text>一部電影</text>
  </view>

.nav-default{
  color: blue;
}
.nav-hover{
  color: red;
}

由于text是塊級元素，為了把它轉為行內元素，所以使用樣式display: inline并給他添加容器view,轉為行內元素，

由于text只支持字符串文本，所以navigatior元素不能解析，所以將這一句話分成了3個片段，將需要選擇跳轉的元素進行圈定，如上面的本周推薦，就給他添加了navigator元素，用來支持它跳轉另外的頁面，在navigator中也有很多樣式和方法，首先url是跳轉的頁面網址，open-type支持多種方式：

在這里，由于css的執行，在同一塊里面，當css定義的屬性有沖突的時候，后面個成功！

如果變為

.nav-hover{
  color: red;
}
.nav-default{
  color: blue;
}

就不會在點擊的時候顯示為紅色，會一直是藍色！

open-type 的合法值

示例代碼

在開發者工具中預覽效果

.navigator-hover {
  color:blue;
}
.other-navigator-hover {
  color:red;
}
<!-- sample.wxml -->
<view class="btn-area">
  <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳轉到新頁面</navigator>
  <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在當前頁打開</navigator>
  <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切換 Tab</navigator>
  <navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打開綁定的小程序</navigator>
</view>

默認是navigator，使用redirect沒有返回按鈕

獲取更多內容

獲取更多內容請訪問： https://juntech.top/