一、注册小程序appID

在微信小程序开发工具中"新建项目"，得到如下界面：

在"注册"环节得到AppID

二、开发一个简单的天气查询小程序

目录如下：

1、app.json

{"pages":["pages/weather/weather"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle":"black"},"style": "v2","sitemapLocation": "sitemap.json","requiredPrivateInfos": ["getLocation", "chooseLocation"],"lazyCodeLoading": "requiredComponents"
}

 2、weather.js

// pages/weather/weather.ts
import {formatTime} from "../../utils/util"Page({/*** 页面的初始数据*/data: {today: '20230314',city: '杭州',inputCity: '',wendu: 22,weather_pic: 'https://img.jumdata.com/weather-icon/d00.png',forecast:[{daytime: '0314',day_weather: '晴',day_high_temperature: '23',night_low_temperature: '9',day_wind_direction: '南风',day_wind_power: '3-4级'},{daytime: '0315',day_weather: '阴',day_high_temperature: '25',night_low_temperature: '10',day_wind_direction: '北风',day_wind_power: '3-4级'},{daytime: '0316',day_weather: '阴',day_high_temperature: '25',night_low_temperature: '10',day_wind_direction: '北风',day_wind_power: '3-4级'},{daytime: '0317',day_weather: '阴',day_high_temperature: '25',night_low_temperature: '10',day_wind_direction: '北风',day_wind_power: '3-4级'},{daytime: '0318',day_weather: '阴',day_high_temperature: '25',night_low_temperature: '10',day_wind_direction: '北风',day_wind_power: '3-4级'}   ],},inputing: function(e){this.setData({inputCity: e.detail.value})},bindSearch: function(e){this.searchWeather(this.data.inputCity);},searchWeather: function(e){var self = this;wx.request({url: 'https://weatherquery.api.bdymkt.com/weather/query/by-area?area=' + self.data.inputCity,method: 'POST',data: {},header: {'Content-Type': 'application/json;charset=UTF-8','X-Bce-Signature': 'AppCode/<自己的appcode> '},success: function(res){console.info(res);var weathers = res.data.data.dayWeathers.slice(1, -1);for(var i=0; i < 5; i++){var d = weathers[i].daytime;weathers[i].daytime = d.slice(-4);}self.setData({wendu: res.data.data.now.temperature,city: self.data.inputCity,weather_pic: res.data.data.now.weather_pic,forecast: weathers,});}});},/*** 生命周期函数--监听页面加载*/onLoad() {var self = this;var today_time = formatTime(new Date());this.setData({today: today_time});wx.request({url: 'https://weatherquery.api.bdymkt.com/weather/query/by-area?area=杭州',method: 'POST',data: {},header: {'Content-Type': 'application/json;charset=UTF-8','X-Bce-Signature': 'AppCode/<自己的appcode> '},success: function(res){var weathers = res.data.data.dayWeathers.slice(1, -1);for(var i=0; i < 5; i++){var d = weathers[i].daytime;weathers[i].daytime = d.slice(-4);}self.setData({wendu: res.data.data.now.temperature,weather_pic: res.data.data.now.weather_pic,forecast: weathers,});}});},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

 3、weather.wxml

{{city}}({{today}}){{wendu}}度{weather_pic}}"/>{index}}" wx:for="{{forecast}}">{{item.daytime}}{{item.day_weather}}最高{{item.day_high_temperature}}度最低{{item.night_low_temperature}}度{{item.day_wind_direction}}{{item.day_wind_power}}{inputCity}}" />查询

4、weather.wxss

/* pages/weather/weather.wxss */
.content{height: 100%;width: 100%;display: flex;flex-direction: column;font-family: 微软雅黑, 宋体;box-sizing: border-box;padding: 20rpx 10rpx;color: #252525;font-size: 16px;background-color: #F2F2F8;
}.info{margin-top: 50rpx;width: 100%;height: 140px;
}.today-pic{width: 100rpx;height: 100rpx;}.city{margin: 20rpx;border-bottom: 1px solid #043567;
}.temp{font-size: 60rpx;line-height: 130rpx;text-align: center;padding-top: 20rpx;color: #043567;
}.forecast{width: 100%;display: flex;margin-top: 50rpx;align-self: flex-end;
}.next-day{width: 20%;height: 500rpx;text-align: center;line-height: 30px;font-size: 14px;margin: 0 3rpx;border:1px solid #043567;border-radius: 10rpx;
}.date{margin-bottom: 20rpx;border-bottom: 1px solid #043567;color: #F29F39;
}.search-area{display: flex;background: #f4f4f4;padding: 1rem 0.5rem;
}.search-area input{width: 70%;height: 30px;line-height: 38px;border:1px solid #ccc;color: #000;background-color: #fff;border-radius: 5px;
}.search-area button{width: 30%;height: 35px;line-height: 40px;margin-left: 5px;
}

三、上传代码

点击“上传”代码，确保没有问题。

 在微信小程序的“版本管理”中进行提交审核。

 “开发版本” -》 “审核版本” -》 “线上版本”。

如果小程序比较简单，2分钟即可审核完毕。

发布到线上之后，小程序并不能马上搜出来，官方解释为：