一次微信小程序开发记录

大家好，欢迎来到IT知识分享网。

微信小程序简介

一、微信小程序创建新项目

1.1、相关链接

1.2、小程序AppID的获取

1.3、创建项目

1.4、后台介绍

1.5、工具介绍

1.6、目录结构

二、创建新页面及其他介绍

2.1、创建新页面

2.2、元素类型介绍

2.3、样式单位介绍

三、书写data数据并获取和修改

四、事件系统

1.绑定事件

2.事件传参

3.事件接参

4.双向数据绑定

五、数组的渲染

5.1、普通数组

5.2、对象数组

六、条件渲染

七、template模板

八、WXS的两种格式

8.1、WXS第一种写法

8.2、WXS第二种写法

九、组件化开发

9.1、定义子组件

9.2、调用子组件

十、父子组件通信

10.1、父传子

10.2、子传父

十一、分享功能

微信小程序简介

小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

微信小程序是一种不用下载就能使用的应用，也是一项创新，经过将近两年的发展，已经构造了新的微信小程序开发环境和开发者生态。微信小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果，已经有超过150万的开发者加入到了微信小程序的开发，与我们一起共同发力推动微信小程序的发展，微信小程序应用数量超过了一百万，覆盖200多个细分的行业，日活用户达到两个亿，微信小程序还在许多城市实现了支持地铁、公交服务。微信小程序发展带来更多的就业机会，2017年小程序带动就业104万人，社会效应不断提升。

2016年9月份 张晓龙 开了一个发布会 —- 推行了 小程序 产品

2017年1月9日正式上线

发布会上几个概念

推出一款应用 , 不需要安装 , 就可以直接使用 , 小程序 够小 小程序上线要求 不能大于2M

面试题 : 如果小程序 非常复杂 , 必须超过2M 怎么办?

分包处理 : 按照功能 , 把小程序分成若干个 功能包 每一个包不能超过2M , 在配置文件中 整合成一个项目 上传 ，目前为止，整个小程序能够达到20M；

用完即走 , 不需要卸载 (够小) 2M

未来 应用将无处不在

小程序 App

大小有限制 , 不能超过2M(功能相对局限性) 大小没有限制 (功能更加强大)

不用安装 , 不用更新 (方便) 需要到对应的商城下载 , 定期更新(复杂)

打开方式 , 一丢丢麻烦 (先打微信->小程序) 使用频率低 打开方式非常方便 , 直接在桌面点击 , 使用频率高

跨平台 (写一次 , 运行在所有平台) 上线简单 IOS版 , 安卓版 (小米 , 应用 , 华为 …..) 上线麻烦

成本非常非常便宜 成本非常非常贵

客户 给你一个需求 , 能给客户适当的推荐 , 应该做小程序 应该做app

大悦城 酸菜鱼 —- 线上排队功能 (小程序)

直播带货平台 —- (app)

商城 买点小东西 —- 小程序 app 都可以

一、微信小程序创建新项目

微信公众平台

微信公众平台，给个人、企业和组织提供业务服务与用户管理能力的全新服务平台。

https://mp.weixin..com/

微信公众平台 （公众号）

微信开放平台

https://open.weixin..com/

微信开放平台

1.1、相关链接

注册微信小程序账号：

微信公众平台

微信公众平台，给个人、企业和组织提供业务服务与用户管理能力的全新服务平台。

https://mp.weixin..com/

微信开发文档：

微信开放文档

微信开发者平台文档

https://developers.weixin..com/miniprogram/dev/framework/

微信开发者工具下载路径：

微信开发者工具下载地址与更新日志 | 微信开放文档

微信开发者平台文档

https://developers.weixin..com/miniprogram/dev/devtools/download.html

1.2、小程序AppID的获取

wx1b41fefe4f9411d6

微信公众平台

微信公众平台，给个人、企业和组织提供业务服务与用户管理能力的全新服务平台。

https://mp.weixin..com/

登录进去之后：

1.3、创建项目

填写项目名称，选择目录，勾选不使用云服务，点击新建。

进入到以下界面，表示创建成功：

1.4、后台介绍

1.5、工具介绍

1.6、目录结构

在小程序中，所有碰见json结尾的文件都是配置文件

app文件：应用文件，文件名不能变

app.js 主逻辑文件，入口文件，最先执行的文件， 相当于vue中main.js，必须有

app.wxss 全局样式文件，非必须文件

app.json 全局配置文件, 必须有

项目对编辑器的配置文件

project.config.json

utils 目录 工具

非必须的，工具文件，写一些公共的js文件

​

pages 目录， 页面目录

index 页面目录，

index.wxml 页面目录 （html）

index.wxss 页面样式 ( css)

index.js 页面逻辑 (js)

index.json 页面配置

logs 页面目录

logs.wxml

logs.wxss

logs.js

logs.json

​

vue的组件 .vue文件： style template script

二、创建新页面及其他介绍

2.1、创建新页面

小程序的页面创建， 可以在pages选项中进行设置，只要写好路径，保存之后，自动会生成4个文件；

直接找到根目录下的app.json文件，配置一行路径，保存后就会新建home文件夹及其对应文件了。

app.json文件文件中：page这个数组的第一项就是项目首页

重新设置编辑器设置项：

app.json中的设置项：

“window”: {

“navigationBarTextStyle”: “black”, //导航条文字颜色

“navigationBarTitleText”: “开发者–老高”, // 导航条文字

“navigationBarBackgroundColor”: “#ffffff” // 导航条背景颜色

},

注意：导航条文字颜色只能是black或者white两个值中的一个！其他都不能写

app.json文件

1.pages选项， 页面路径，所有的页面必须在当前选项中进行配置（除了分包页面）

​

{

“pages”: [

“pages/index/index”,

“pages/cart/cart”,

“pages/mine/mine”

],

}

​

2.”entryPagePath”: “pages/cart/cart”, 启动页

2.2、元素类型介绍

小程序中的块级元素：view组件，行内元素：text组件，

小程序中没有a标签，但是用路由标签来代替，后面说。

<!–

view组件 盒子，作用和div一样

–>

<!–

text,文本标签，作用和span一样的

–>

<!–

mustache语法 {{}}

–>

<text user-select=”{{ true }}”>hello</text>

2.3、样式单位介绍

一般情况下，移动端的设计稿的水平尺寸一般是是750px 或者 1125px，都是375的倍数。

小程序中常用的单位是rpx，responsive px 宽度自适应单位

1px = 2rpx， 所以设计稿上的100px ，小程序中就要写成200rpx

三、书写data数据并获取和修改

整个页面的数据来源，都是在 js文件中对应的data属性

// Page构造器，作用：构建页面

data: {

name:”老高”

},

插值语法 在wxml中获取data数据：

<view >

{{name}}

</view>

在方法中获取data数据：

// pages/cart/cart.js

Page({

/

* 页面的初始数据

*/

data: {

name:”老高”

},

/

* 生命周期函数–监听页面加载

*/

onLoad(options) {

this.setData({

name:’老高888′

})

},

/* 自定义函数 */

click(){

console.log(1);

this.setData({

name:this.data.name == “老高666″?”老高888″:”老高666”

})

}

})

四、事件系统

1.绑定事件

<view bind:tap=”click”>

{{name}}

</view>

2.事件传参

<view bind:tap=”click” data-id=””>

{{name}}

</view>

3.事件接参

/* 自定义函数 */

click(e){

console.log(e.currentTarget.dataset);

this.setData({

name:this.data.name == “老高666″?”老高888″:”老高666”

})

}

总结：

target 事件源上的参数

currentTarget 触发事件绑定的组件上的参数

detail 获取的是组件的私有事件上的参数

4.双向数据绑定

1.简易的双向数据绑定

<input type=”text” model:value=”name” />

2.引用类型的双向数据绑定，

小程序中并没有v-model这个属性，只能用事件和值配合来代替

cart.wxml中：

<input type=”text” model:value=”name” bindinput=”_input”/>

cart.js中：

// pages/cart/cart.js

Page({

/

* 页面的初始数据

*/

data: {

name:”老高”

},

/

* 生命周期函数–监听页面加载

*/

onLoad(options) {

this.setData({

name:’老高888′

})

},

/* 自定义函数 */

click(e){

console.log(e.currentTarget.dataset);

this.setData({

name:this.data.name == “老高666″?”老高888″:”老高666”

})

},

_input(e){

console.log(e.detail.value);

this.setData({

name:e.detail.value

})

}

})

五、数组的渲染

5.1、普通数组

wx:为属性前缀，key的盒子不用写item

for后面的双{{ }}不需要写item

遍历过程中item依旧表示每一项

id只能是数字或者纯数字的字符串

<view wx:for=”{{arr}}” wx:for-index=”del” wx:for-item=”val”>

{{val.value}} {{del}}

</view>

5.2、对象数组

为了提高代码可读性，微信小程序提供了wx:for-item=“xxx”给我们修改这个item变量的命名

<view wx:for=”{{arr}}” wx:for-index=”del” wx:for-item=”val”>

{{val.value}} {{del}}

</view>

六、条件渲染

<view wx:if=”{{condition === 1}}”>

<!– 如果条件满足，显示这段文本 –>

条件为1时显示的内容

</view>

<view wx:elif=”{{condition === 2}}”>

<!– 如果条件满足，显示这段文本 –>

条件为2时显示的内容

</view>

<view wx:else>

<!– 如果以上条件都不满足，显示这段文本 –>

其他情况下显示的内容

</view>

<view hidden=”{{hidden}}”>

<!– 使用hidden属性来根据条件隐藏元素 –>

这段文本根据hidden的值来决定显示或隐藏

</view>

在上面的例子中：

wx:if 指令根据条件 condition 的不同值来决定显示哪个 <view> 元素。

wx:elif 指令表示如果前面的 wx:if 条件不满足，那么检查当前条件。

wx:else 指令表示如果前面的 wx:if 和 wx:elif 条件都不满足，则显示 <view> 中的内容。

hidden 属性根据 hidden 变量的值来决定是否隐藏 <view> 元素。

这些指令和属性在小程序中常用于根据不同条件来动态显示或隐藏页面的部分内容，提升用户体验和交互性。

七、template模板

新建模板文件夹templates，继续在templates里面新建aaa.wxml：

可以往模板里面传值：

cart.wxml中

<import src=”./templates/aaa.wxml”></import>

<!– 通过data属性向模板内部传入数据 –>

<template is=”tmpl1″ data=”{{msg:’呵呵’}}”></template>

<template is=”tmpl2″ data=”{{aaa:’哈哈’}}”></template>

aaa.wxml中：

<!– 定义模板 用name属性起名字 –>

<template name=”tmpl1″>

<view>{{msg}}</view>

</template>

<template name=”tmpl2″>

<view>{{aaa}}</view>

</template>

八、WXS的两种格式

wxs有点像我们html里面的script标签，既可以做内嵌式的写法，又可以做外链式的写法。

但是其中有模块化思想，所以，书写的函数需要导出才能使用。

8.1、WXS第一种写法

<wxs module=”wxs1″>

function toFixed(money, fiedNum) {

return money.toFixed(fiedNum)

}

module.exports = {

toFixed: toFixed

}

</wxs>

<view>

{{wxs1.toFixed(money,4)}}

</view>

8.2、WXS第二种写法

cart文件夹下新建cart.wxs文件

function toFixed(money, fiedNum) {

return money.toFixed(fiedNum)

}

module.exports = {

toFixed: toFixed

}

cart.wxml中：

<wxs src=”./cart.wxs” module=”wxs1″/>

<view>

{{wxs1.toFixed(money,4)}}

</view>

九、组件化开发

9.1、定义子组件

app.json中配置多一条路径：

“pages”: [

“pages/cart/cart”,

“pages/index/index”,

“pages/logs/logs”,

“pages/cate/cate”,

“components/comp1/comp1”

],

comp1.json中：

{

“usingComponents”: {},

“component”: true

}

9.2、调用子组件

{

“usingComponents”: {

“my-comp1″:”/components/comp1/comp1”

}

}

来到需要调用这个子组件的页面cart.json中注册组件：

cart.wxml中就可以使用组件了：

<my-comp1></my-comp1>

十、父子组件通信

10.1、父传子

第1步：在父组件中传入money，注意：money是在父组件的data定义的数据

<my-comp1 money=”{{money}}” ></my-comp1>

第2步：在子组件中定义好props数据，在微信小程序中不叫props，而叫properties

在comp1.js中声明：

Component({

properties:{

num:{

type:String,

value:”默认值”

}

}

})

第3步，就可以在子组件中直接使用money了：

<text>{{money}}</text>

10.2、子传父

第1步：在父组件中定义修改money的函数

cart.js中：

moneyUpdate(val){

console.log(val.detail);

this.setData({

money:val.detail

})

}

第2步：在父组件中调用子组件的地方传入自定义事件函数

<my-comp1 money=”{{money}}” bind:fn=”moneyUpdate”></my-comp1>

第3步：在子组件内部做点击事件，通过 this.triggerEven 来触发这个事件函数

<button bind:tap=”moneySub”>-</button>

<text>{{money}}</text>

<button bind:tap=”moneyAdd”>+</button>

comp.js中：

moneySub() {

this.triggerEvent(“fn”,–this.properties.money)

},

moneyAdd() {

this.triggerEvent(“fn”,++this.properties.money)

}

十一、分享功能

<button open-type=”share”>分享</button>

/

* 用户点击右上角分享–分享

*/

onShareAppMessage() {

// console.log(123);

return {

title: “老高888”,

imageUrl: “/images/77.png”,

path: “/pages/cate/cate.wxml”

}