> ## :-: [小程序简介](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 }, }); ```