如何使用微信开发工具进行小程序开发
一、小程序介绍
官方文档:微信开放文档
微信小程序,简称小程序,英文名 MiniProgram ,是一种不需要下载安装即可使用的应用,它实现了应用 “ 触手可及 ” 的梦想,用户扫一扫或者搜一下即可打开应用。也体现了 “ 用完即走 ” 的理念,对于用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。对于开发者而言,小程序 开发门槛相对较低 ,难度不及 APP,能够满足简单的基础应用。
二:申请账号
2.1申请账号
官网: 微信公众平台
微信小程序允许个人开发者申请账号,申请成功后才能进行下一步的学习和开发。
点击进入后,选择小程序
2.2登录
申请成功后,使用刚刚注册的 邮箱账号 和 密码 进入到 微信小程序官方控制平台中。
2.3、获取开发 appid
进入微信小程序官方控制平台后,主要为了得到开发所要用到的 appid ( 小程序 ID ) 和 secret ( 小程序密钥 ) 这两项值。
三:开发工具
3.1下载与安装
官方开发工具
下载:
3.2创建项目
四、小程序的文件结构及配置
4.1文件结构
小程序 包含一个 描述 整体 程序 的 app 和 多个 描述各自页面的 page 。
一个小程序主体部分由三个文件组成,必须放在项目的 根目录 ,如下:
文件 | 必填 | 作用 |
---|---|---|
app.js | 是 | 小程序 入口文件 |
app.json | 是 | 小程序公共配置文件 |
app.wxss | 是 | 小程序公共样式表 |
五:小程序常用组件
小程序基础组件
5.1text文本
5.2view区域
<view>最好的猎人,往往以猎物的形式出现</view>
5.3button 按钮
<button type="primary" size="mini" bindtap="showMsg" data-msg="我已经爱上你了">按钮1</button>
<button type="warn" size="mini" bindtap="showMsg" data-msg="我你快嫁给我吧">按钮2</button>
5.4input表单
<input
value="{{msg}}"
bindinput="changeMsg"
type="text"
style="border: 1rpx solid #ccc; margin: 15rpx; padding: 15rpx;"
/>
5.5image图片
<image src="/images/pic.jpeg"></image>
5.6include包含
<!-- 导入非template -->
<view class="title">include导入非template</view>
<!-- include 相当于拷贝,就是不拷贝template的内容 -->
<include src="/template/test"/>
<view>import只能导入模板template,include只能靠白费template的内容</view>
5.7import导入
<!-- 模板 -->
<view class="title">模板</view>
<import src="/template/test"/>
<template is="user" data="{{...userInfo}}"></template>
<template is="user" data="{{...userInfo2}}"></template>
要新建一个template文件夹
六:模板语法
6.1文本渲染
<view>{{msg}}</view>
6.2条件渲染
<!-- 条件渲染指令 -->
<view class="title">条件渲染</view>
<view wx:if="{{isLog}}">欢迎回来</view>
<view wx:else>请先登录</view>
6.3列表渲染
<view wx:for="{{list}}" wx:key="item">{{index+1}}--{{item}}</view>
6.4自定义列表渲染
<view>定义item与index的名称</view>
<view wx:for="{{list}}" wx:for-item="myitem" wx:for-index="myind" wx:key="myind">
{{myind+1}}--{{myitem}}
</view>
七:事件
7.1bindtap 触摸/点击
<button size="mini" type="primary" bindtap="tapHd">按钮</button>
7.2bindchange 值发生变化
7.3bindconfirm 确认
7.4bindinput 输入变化
<input
value="{{msg}}"
bindinput="changeMsg"
type="text"
style="border: 1rpx solid #ccc; margin: 15rpx; padding: 15rpx;"
/>
八:表单的双向绑定
<view class="title">表单双向绑定</view>
<input
value="{{msg}}"
bindinput="changeMsg"
type="text"
style="border: 1rpx solid #ccc; margin: 15rpx; padding: 15rpx;"
/>
<view>{{msg}}</view>
九:事件的传参数
<view class="title">事件-传参</view>
<button type="primary" size="mini" bindtap="showMsg" data-msg="我已经爱上你了">按钮1</button>
<button type="warn" size="mini" bindtap="showMsg" data-msg="我你快嫁给我吧">按钮2</button>
<view class="title">事件</view>
<button size="mini" type="primary" bindtap="tapHd">按钮</button>
十:响应式更新
this.setData({temp:""}}
十一:wx 的api
详情请看微信小程序官方文档
小程序端调用第三方API接口可以分为两种情况
一种是小程序前端调用第三方API,直接用wx.request即可,不过需要注意的是需要开通安全域名
另一种是在服务端调用第三方API,小程序端用服务端,比如使用小程序云开发,在云函数中请求第三方API,然后在小程序端调用云函数,这种情况下通常不需要开通安全域名,而且特别适合对安全性比较敏感的场景
比如大多数的开放平台都需要在服务端调用他们的开放端口,而且需要appid/appsecret或者key/secret等凭证才可以调用,这种情况下,放在小程序前端调用是不合适的,因为极有可能泄露凭证,又不符合服务端调用的要求,此时,改成放在云函数中调用开放接口就可以解决这个问题
如何使用微信开发工具进行小程序开发相关推荐
- 利用微信开发者工具获取小程序指定页面路径!
利用微信开发者工具获取小程序指定页面路径! 小程序不同于app,小程序的每个页面都有页面路径.在使用微信小程序的过程中,很多场景都要使用到小程序的页面路径.比如微信图文中的小程序,公众号菜单中的小程序 ...
- 《微信公众平台与小程序开发——从零搭建整套系统》——第1章,第1.2节微信公众平台...
本节书摘来自异步社区<微信公众平台与小程序开发--从零搭建整套系统>一书中的第1章,第1.2节微信公众平台,作者 张剑明,更多章节内容可以访问云栖社区"异步社区"公众号 ...
- 【浙政钉】微信-专有钉钉小程序-开发踩坑实记
文章目录 ⭐[浙政钉]微信-专有钉钉小程序-开发踩坑实记 ⭐ 创建项目 ⭐ 转化方案 ⭐ 政务钉钉调试 ⭐ 上传发布 ⭐[浙政钉]微信-专有钉钉小程序-开发踩坑实记 最近有个需求,要将微信小程序转为浙 ...
- 微信开发者工具测试小程序
使用微信开发者工具测试小程序 1.安装微信开发者工具.VS code工具 2.拉代码到本地,通过git clone 代码仓库路径下载代码 3.用VS code生成dist文件 VS code打开拉取到 ...
- 微信汽配电商小程序开发功能设计方案
随着互联网的不断发展,在汽车服务市场中的发展也紧跟着市场发展的脚步.汽车配件行业中,通过微信汽配电商小程序就可以实时查看具体的销售情况,以及收入的具体情况. 微信汽配电商小程序功能: 1.商城 商城中 ...
- 微信订水水站小程序开发有哪些作用
微信订水水站小程序开发有哪些作用 微信订水送水小程序是通过小程序进行在线订水,改变过去人们通过电话订水的复杂的过程,开发微信订水小程序不仅可以方便用户订购水,纯净水企业通过还可以互联网改善商店管理. ...
- 调查问卷考试问卷创建生成工具助手小程序开发
调查问卷考试问卷创建生成工具助手小程序开发 问卷调查考试软件,可以自由让每一个用户自由发起调查问卷.考试问卷.发布的问卷允许控制问卷的搜集.回答等各个环节的设置,同时支持系统模板问卷,选用模板问卷后可 ...
- 微信公众号及小程序开发入门(二)
开发过程中一些对微信公众号和小程序的认识. 一.服务号 在公众号开发入门一中提到,微信公众号分为订阅号和服务号,其中服务号功能最强,只准企业申请,并且要每年交300元认证费.如果企业想拥有自己的公众号 ...
- web api接口开发实例_小程序开发如何调用 API 接口,以豆瓣电影为例
API 调用是开发者在小程序开发过程中经常会遇到的问题,本期我们以为调用豆瓣电影 API 为例具体来看 API 的调用过程以及常见的一些问题. 测试用到的小程序是「电影周周看」,内容来自清华大学软件学 ...
最新文章
- Python : IndentationError: expected an indented block
- rabbitmq中的三种交换器(匹配模式)
- vue中解决Uncaught ReferenceError: regeneratorRuntime is not defined问题
- app启动调用的api
- python字符串查找数字_Python Regex - 在字符串中用逗号查找数字
- 计算机动画制作 实验要求,有关计算机动画设计课程教学的对比试验
- tkFileDialog报错,模块未找到出错:没有名字叫做 tkFileDialog 的模块
- 循环队列的介绍与实现
- Impala-shell 查询异常 - ERROR: AnalysisException: Failed to evaluate expr: 1
- error: storage class specified for parameter问题-转
- Ninject.Web.Common,Ninject.MVC3源码分析
- 解决npm安装时出现run `npm audit fix` to fix them, or `npm audit` for details
- Mysql之1050错误解决办法
- linux chmod 755 ,750,777
- php跳转qq临时会话,QQ客服支持临时会话设置
- 如何反编译dll文件
- linux谷歌浏览器flash屏蔽,默认禁用Flash!谷歌发布Chrome 76稳定版
- [Paper Reading] Preference-Adaptive Meta-Learning for Cold-Start Recommendation
- 图像修复 图像补全_图像修复简介
- 第1章 开篇-为什么要做CI/CD?
热门文章
- python关于矩阵的基本程序知识——使用Numpy模块
- android执行.sh,android中调整cpu频率以及执行sh文件简单记录
- android 仿旅游日历控件_Android实现仿魅族日历首页功能
- 诺基亚被台湾之星电信选为5G网络供应商
- 【庖丁解牛】rm: cannot remove ‘libtoolT‘: No such file or directory
- 前端项目统一管理API接口
- 关于tf库的问题解决2021-11-05
- anaconda pycharm_python入门必备干货 | python,pycharm,anaconda区别与联系
- Git 安装与卸载 gitk安装与优化
- 墨墨背单词不能安装,出现“未安裝应用程序”,补充解决办法