> ## :-: [小程序簡介](https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/) (2019-7-8) 小程序是一種全新的連接用戶與服務的方式，它可以在微信內被便捷地獲取和傳播，同時具有出色的使用體驗。 > ## :-: 起步 (2019-7-8) ``` view == div image == img text == span ``` > ## :-: 組件引入 // 模塊模版 -- components/bigimgcmp.wxml ``` <view class="box" style="background: #176;"> <image src="{{imgSrc}}" /> <text>{{mainTitle}}</text> </view> ``` // 模塊樣式 -- components/bigimgcmp.wxss ``` .box { box-sizing: border-box; width: 100%; padding: 20rpx; display: flex; flex-wrap: wrap; justify-content: center; border-radius: 10px; margin-bottom: 20rpx; } .box>image { width: 100%; margin-bottom: 10rpx; border-radius: 10px; } .box>text { line-height: 50rpx; vertical-align: middle; color: aqua; } ``` // 模塊配置 -- components/bigimg/index.js ``` Component({ /** * 組件的屬性列表 */ properties: { // properties 優先于 data 的數據、 // 簡寫(初始值：String == '' | Boolean == false | Number == 0 ) imgSrc: String, mainTitle: String, // 更細致的寫法 // imgSrc: { // type: String, // value: '--', // observer: function(newVal, oldVal, changePath) { // console.log(newVal, oldVal, changePath); // } // }, // mainTitle: { // type: String, // value: '我是標題、我是標題、我是標題', // observer: function(newVal, oldVal, changePath) { // newVal -- 被改變的新數據 | oldVal -- 上一次的舊數據 // console.log(newVal, oldVal, changePath); // } // } }, }) ``` 配置引入模塊 -- idnex.json ``` { "usingComponents": { "d-bigImg": "/components/bigimg/cmp" } } ``` 引入模塊 -- idnex.wxml ``` <d-bigImg img-src="http://p6.qhimg.com/bdm/480_296_0/t01874c1dcff33cfb54.jpg" main-title="Demo - 引入組件" /> ``` :-: **效果圖**   ## :-: [Behavior](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html) ``` // -- 模塊文件 let oB = Behavior({ properties: { headPortraitSrc: String, nickname: String, content: String, subtitle: String, label: String, selected: Boolean, like: Boolean } }); export { oB }; // -- 入口文件 import { oB } from "../my-behavior.js"; Component({ // Behavior -- 行為引入、 behaviors: [oB], /** * 組件的屬性列表，properties 屬性的數據會經過行為方法引入、 */ // properties: { headPortraitSrc:String, nickname:String, content:String, subtitle:String, label:String, like:Boolean }, }); ```