開始

申請賬號

• 小程序注冊頁
  

開發(fā)設置

• 登錄 小程序后臺 ，我們可以點擊左側菜單 “開發(fā)”-“開發(fā)管理”,點擊后正文上方點擊 “開發(fā)設置” ,就看到小程序的 AppID(小程序ID) 了 。
• 小程序的 AppID 相當于小程序平臺的一個身份證，后續(xù)你會在很多地方要用到 AppID （注意這里要區(qū)別于服務號或訂閱號的 AppID）。
  有了小程序帳號之后，我們需要一個工具來開發(fā)小程序。

開發(fā)工具

• 前往 開發(fā)者工具下載頁面 ，根據自己的操作系統(tǒng)下載對應的安裝包進行安裝,建議下載穩(wěn)定版.
• 打開小程序開發(fā)者工具，用微信掃碼登錄開發(fā)者工具，準備開發(fā)你的第一個小程序吧！

新建小程序

• 小程序tab新建項目，給你的項目起一個好聽的名字，填入剛剛申請到的小程序的 AppID，后端服務勾選 “不使用云服務” ，默認第一個ts官網基礎模版即可,點擊新建，你就得到了你的第一個小程序了，點擊頂部菜單編譯就可以在微信開發(fā)者工具中預覽你的第一個小程序。
• 
• 

閱讀文檔

• 微信官方文檔-小程序
• 建議有空把小程序相關文檔都看一遍

模版語法

• WXML語法參考

項目架構

• 原生開發(fā) + vant weapp ui
• 組件: 原生組件
• 第三方組件: Vant Weapp
  • 使用 Vant Weapp 前，請確保你已經學習過微信官方的 小程序簡易教程 和 自定義組件介紹。
• icon: 阿里巴巴矢量圖標庫

開始編寫

• 按照提示安裝vant/weapp
  • 步驟五 typescript 支持可以跳轉,默認ts模版已經有了
  • 點擊 工具 -> 構建 npm，并勾選 使用 npm 模塊 選項，構建完成后，即可引入組件。
• app.json 全局引入組件,其他頁面或者組件都可以直接使用

    "usingComponents": {
      "van-search": "@vant/weapp/search/index",
      "van-tab": "@vant/weapp/tab/index",
      "van-tabs": "@vant/weapp/tabs/index",
      "van-button": "@vant/weapp/button/index",
      "van-grid": "@vant/weapp/grid/index",
      "van-grid-item": "@vant/weapp/grid-item/index",
      "van-icon": "@vant/weapp/icon/index"
    },
  

• index.wxml直接使用

    <view>
      <van-search value="{{ value }}"   bind:click-input="onSearch" disabled="{{true}}"/>
    </view>
  

基礎語法

wx:for循環(huán)

• index.wxml
  • wx:for-item=“item” 不需要重新命名,可以忽略不寫

      <van-tab wx:for="{{ tabData }}" wx:for-item="item" wx:key="id" title="{{item.title}}">
			{{item.title}}
      </van-tab>

• index.ts

Page({
  data: {
    value: "",
    voiceList: [],
  },
  onLoad() {
    let that = this;
    // 使用 Mock
    ajax({
      data: "",
      fn: function (res: any) {
        //這里既可以獲取模擬的res
        console.log(res.data);
        //修改data里數據
        that.setData({ voiceList: res.data });
      },
      mockConfig: {
        "data|50": [
          {
            "id|+1": 0,
            img: "@image('150x100', '#4A7BF7','#fff','pic')",
            title: "@ctitle(3,200)",
            name: "@cname()",
            time: '@datetime(M-dd)',
            play: "@float(1,160,0,9)",
            icon: "@image('5x10')",
          },
        ],
      },
    });
  }
});

wx:if判斷

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

頁面導航

• 頁面下方導航

• 

• app.json

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/subregion/subregion",
    "pages/my/my",
    "pages/components/ChaseItem/ChaseItem",
    "pages/levelPage/search/search"
  ],
"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁"
      },
      {
        "pagePath": "pages/subregion/subregion",
        "text": "分區(qū)"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的"
      }
    ]
  }
}

自定義組件引用

• index.wxml
  • 需要用自定義組件的頁面

<view class="page page-home">
    <van-tabs active="{{ active }}" bind:change="onChange">
      <van-tab wx:for="{{ tabData }}" wx:for-item="item" title="{{item.title}}">
        <hot-item voiceList="{{voiceList}}" wx:if="{{item.title == '熱門'}}"/>
        <chase-item wx:else/>
      </van-tab>
    </van-tabs>
</view>

• index.json
  • 配置自定義組件的名稱和引用路徑

{
  "usingComponents": {
    "hot-item": "../components/HotItem/HotItem",
    "chase-item": "../components/ChaseItem/ChaseItem"
  }
}

• ChaseItem.ts
  • 自定義組件,ts文件的基礎
  • Component 配置自定義組件,properties 父組件的prop傳入,data自己的數據自定義,observers 監(jiān)聽,methods 方法, ready 加載完成后調用接口

// pages/components/HotItem/index.ts

Component({
  properties: {
    // chaseList: { // 屬性名
  },
  data:{
    chaseDaysData:[],
    btnList:[],
    recommendList:[],
    active:0
  },
  observers: {
    'chaseDaysData': function(chaseDaysData:any[]) {
      console.log('chaseDaysData',chaseDaysData)
    }
  },
  methods:{
    imageOnloadError(e:any){
      console.log("圖片加載出錯啦",e)
    },
  },
  ready(){
        let that = this;
        // 每天番劇
        ajax({data:"",fn:function (res:any) {
          //這里既可以獲取模擬的res
          console.log(res.data)
          that.setData({chaseDaysData:res.data})
        },mockConfig:{
              'data|7': [{
                'id|+1': 1,
                'title|+1': ['一','二','三','四','五','六','日'],
                ...Mock.mock({
                  'items|7':[{
                    'img': "@image('80x80', '#4A7BF7','#fff','pic')",
                    'title': '@ctitle(4,10)',
                  }]
                })
              }] 
        }});
  }
})

樣式修改

單行、多行省略

• 單行省略

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 160rpx;

• 多行省略

  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

flex布局

• 詳見flex布局
  • 彈性布局，用來為盒狀模型提供最大的靈活性。

grid布局

• 詳見CSS Grid 網格布局教程

  • 網格布局適合下面的場景

    /* 上面 */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-row-gap: 10rpx; 
    grid-column-gap: 10rpx;
    padding: 10rpx 10rpx;
  
    /* 下面 */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
     grid-row-gap: 10rpx; 
    grid-column-gap: 10rpx;
    padding: 10rpx 10rpx;
  

  文章來源地址http://www.zghlxwxcb.cn/news/detail-497166.html

發(fā)布

• 右上角有上傳按鈕,點擊即可.
  
• 在小程序-管理-版本管理,就可以看到上傳的版本,點擊提交審核即可,審核版本通過后,再次發(fā)布審核版本即可
  

到了這里，關于如何從零開始開發(fā)一個小程序的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！