微信小程序开发入门

微信小程序有自己的开发工具，微信web开发者工具

 

首先安装工具

官方工具：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

1.双击进行安装。

2.创建项目

 手机扫二维码登陆-选择小程序-添加项目

没有appid选择无appid

项目目录新建一个文件夹，在创建 quick start 项目前打钩。如果文件夹不是空的会出现读取json文件错误，如下图

如果是打开小程序demo，则直接选择就可以，不需要新建文件夹。
 
 操作正确出现的页面

 右面是自动生成的项目代码结构。

app.js是小程序的脚本代码，是必须的；

app.json是整个小程序的全局配置，是必需的；

app.wxss是整个小程序的公共样式表，相当于CSS；

app.wxml是页面结构文件，相当于Html。

做了一个查询快递的页面（没有接口地址，所以并不能查询）

 编辑代码后需要按Ctrl+S键才可以看到效果。

编辑代码后需要按Ctrl+S键才可以看到效果。

编辑代码后需要按Ctrl+S键才可以看到效果。

以下是快递查询页面的代码

<!--logs.wxml-->
<view class="container">
   <input placeholder="请输入快递单号" bindinput="input" />
   <button type="primary" bindtap="btnClick"> 查询 </button> 
</view>

 

input{
  border:1px solid #1AAD19; 
  width:90%; 
  height:20px; 
  font-size:12px; 
  padding:5px 10px;
  }
 button{
   margin-top:20px;
   }