1.注册微信小程序

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验

在微信公众平台官网首页（mp.weixin.qq.com）点击右上角的“立即注册”按钮。

产品定位及功能介绍 | 微信开放文档

上面是具体教程注册完毕之后进入“设置-开发设置”，获取AppID信息。

2.安装App小程序开发软件

下面是下载的链接

稳定版 Stable Build | 微信开放文档

下载稳定版就可以了

3.小程序的路由配置

要在app.json里面配置app的路由

这个里面是页面路径的配置

这个可以配置组件的底部栏

4.小程序的组件

1.文本组件

<view class="title">文本标签</view>

<view>

<view>块状区域</view>

<view>块状区域</view>

<text>文本组件</text>

<text user-select="true">文本组件</text>

</view>

2.图片组件

<view class="title">图片组件image</view>

<image src="/images/pic1.jpg" class="img1" mode="aspectFill"></image>

3.表单组件

<view class="title">表单组件</view>

<input placeholder="请输入" class="inp"></input>

<button>确定</button>

<button type="primary" style="width: 100%;">确定</button>

<button type="warn" size="mini">警告</button>

<button type="default" size="mini">默认</button>

</view>

4.选择组件

<view class="title">switch-picker-inco</view>

<view class="content">

<icon type="success"></icon> <icon type="info" size="100"></icon>

<picker mode="date" header-text="标题">选择</picker>

<switch></switch><switch checked="true"></switch>

<switch checked="true" color="#f70"></switch>

<switch checked="true" type="checkbox"></switch>

4.容器组件

<view class="title">容器组件</view>

<scroll-view class="scrollView" scroll-y="true">

<view class="item">itemA</view>

<view class="item" style="background-color:aqua">itemb</view>

<view class="item" style="background-color:green">itemc</view>

</scroll-view>

<view>水平</view>

<scroll-view class="scrollView" scroll-x="true">

<view class="warp">

<view class="item" style="background-color: greenyellow;">itemA</view>

<view class="item" style="background-color: aqua;">itemB</view>

<view class="item" style="background-color: green;">itemC</view>

</view>

5.swiper轮播图组件

<view class="title">swiper组件</view>

<swiper indicator-dots="true" class="swiper" autoplay="true" circular="true">

<swiper-item>

<view style="background-color: aqua;">A</view>

</swiper-item>

<swiper-item>

<view style="background-color: rgb(198,218,15);">B</view>

</swiper-item>

<swiper-item>

<view style="background-color:white;">C</view>

</swiper-item>

</swiper>

6.文本渲染

<view class="title">文本渲染</view>

<view class="content">

<view>{{2+5}}</view>

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

<view>{{msg.length}}</view>

<view>属性也要带{ { } }</view>

<input type="text" placeholder="{{msg}}"/>

</view>

在js文件里面设置渲染

渲染效果

7.模板template

<view class="title">模板template</view>

<view class="content">

<import src="../template/user" />

<template is="user" data="{{name:'mumu',age:'18'}}"></template>

<template is="user" data="{{name:'mumu',age:'18'}}"></template>

<template is="copy"></template>

</view>

需要先创建一个template文件夹里面放入foot.wxml

然后在里面写入

<template name="user">

<view>用户名：{{name}}</view>

<view>年龄：{{age}}</view>

</template>

<template name="copy">

老曾版权所有2022

</template>

8.表单事件

双向绑定表单

<view class="title">表单</view>

<view class="content">

<input type="text"

value="{{msg}}"

bindinput="changeHd"

style="border: 1rpx solid #ccc;"

/>

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

</view>

事件传参

<view class="title">事件传参</view>

<view class="content">

<button type="primary" size="mini" data-msg="小程序非常好学" bindtap="showMsg">小程序</button>

<button type="warn" size="mini" data-msg="学好vue月入过万" bindtap="showMsg">VUE</button>

</view>

<view class="title">普通事件</view>

<view class="content">

<button type="primary" size="mini" bindtap="showMsg">事件</button>

</view>

点击就可以触发事件传参

8.如何制作todo增删改

<view class="content" style="padding: 30rpx;">

<input type="text" placeholder="请输入计划" class="inp"

value="{{temp}}"

bindinput="inputHd"

bindconfirm="confirmHd"

/>

</view>

<view class="list">

<view class="item" wx:for="{{list}}" wx:key="index">

<switch type="checkbox" checked="{{item.done}}"></switch>

<view class="con">{{item.title}}</view>

<view class="del" data-item="{{item}}" bindtap="delItem">×</view>

</view>

</view>

data: {

list:[

{done:true,title:"学习VUE"},

{done:true,title:"学习React"},

{done:false,title:"学习小程序"},

],

temp:"",//文本框输入的数据

},

// 实现文本框双向绑定

inputHd(e){

// 用户输入实现双向绑定

this.setData({temp:e.detail.value})

},

//用户按手机回车手机的确认

confirmHd(e){

// 获取列表

let list = this.data.list;

// 把新的数据插入列表

list.unshift({done:false,title:this.data.temp})

// 更新列表与清空temp

this.setData({list,temp:''})

},

delItem(e){

let that = this;

wx.showModal({

title: '提示',

content: '你确定要删除吗',

success (res) {

if (res.confirm) {

let item = e.currentTarget.dataset.item;

// 获取传入item

let list = that.data.list

// 获取list列表

let ind = list.findIndex(value=>value.title===item.title);

// 查找下标

list.splice(ind,1)

// 执行删除

that.setData({list})

// 更新视图与数据

console.log('用户点击确定')

} else if (res.cancel) {

console.log('用户点击取消')

}

}

})

},

没了....

看完就会制作微信小程序了相关推荐

都2020年，开发制作微信小程序商城，需要准备什么资料？应该不会不知道吧！
微信小程序使用越来越广泛,而还未入局的对于微信小程序开发需要什么材料甚至不清楚,其实这些材料很简单.总结就是微信支付.微信小程序注册.小程序代码,下面展开说说. 小程序红利从腾讯刚发布的财报看,微信 ...
微信小程序傻瓜制作_零基础，傻瓜式制作微信小程序，3分钟完成不是问题！...
做小程序还必须要养一个设计人员吗?NO!必须要有小程序开发人员吗?NO! 微墨小程序DIY装修功能,帮你灭掉设计师.甩开程序员,商城自己说了算,布局想换就换,风格说变立刻变! 微墨小程序是" ...
公司企业如何制作微信小程序店铺？
微信小程序除了可以为公司企业充当展示官网之外,有些主打线上销售商品的公司企业也会借助小程序来卖货,那就是我们常说的微信小程序店铺.那么公司企业如何制作微信小程序店铺?下面给大家做个讲解. 一.注册小 ...
怎样制作微信小程序？
作为互联网的产物,小程序自诞生以来,迅速发展,为企业的营销提供了强大的助力.小程序已经成为企业在微信上进行宣传销售的最重要的方式之一.它不仅帮助企业提高了用户对品牌的认知,也让企业对市场和竞争对手更加 ...
火锅店制作微信小程序有用吗，微信小程序开发对火锅店的好处
火锅店制作**微信小程序**有哪些好处,微信小程序可以带来多少流量关于火锅的起源,有两种说法:一种说是在中国三国时期或魏文帝时代,那时的"铜鼎",就是火锅的前身:另一种说是火锅始 ...
电影周周看——适合新手学习的微信小程序
电影周周看--适合新手学习的微信小程序一个极其适合新手学习的微信小程序--电影周周看.在这里你可以学习到小程序开发的基本流程和基本方法,麻雀虽小,五脏俱全.搭配学堂在线的教学视频食用更佳!针对教学视 ...
实用工具证件照制作微信小程序源码
这是一款证件照制作的微信小程序,里面也支持直接微信公众号版本生成安装支持多种尺寸制作支持相册上传于直接相机拍摄支持电子照存档等等拥有小程序推荐功能,可以给其它的小程序实现引流另外还支持换装美 ...
全新实用工具证件照制作微信小程序源码下载支持多种证件生成与制作
这是一款证件照制作的微信小程序,里面也支持直接微信公众号版本生成安装支持多种尺寸制作支持相册上传于直接相机拍摄支持多种类型的证件制作如,职业证件,公务员证件,身份证等各种类型支持电子照存档等等 ...
谷歌开发者大会焦点：TensorFlow.js可制作微信小程序，Android 10原生支持5G，TF2.0大更新...
2016 年谷歌开发者大会在中国首次举办,2017 年谷歌宣布成立"AI 中国研发中心",2018年谷歌的"AI+小程序"的产物"猜画小歌" ...

看完就会制作微信小程序了

1.注册微信小程序

2.安装App小程序开发软件

3.小程序的路由配置