第一章：小程序初级入门教程
小试牛刀【含视频】
视频地址：
这一章节中，我们尝试着写一个最简单的例子，包含 2 个静态页面，并增加菜单导航功能。小体验一把。
Step 1. 清理结构
清理后如下结构，只保留了两个 必备 文件，同时做如下修改：
├── app.js
├── app.json
onLaunch: function () {
"window":{
"navigationBarBackgroundColor": "#09ba07",
"navigationBarTextStyle": "#fff",
"navigationBarTitleText": "牛刀小试",
"backgroundColor": "#fbf9fe",
"backgroundTextStyle": "light"
修改后，看下控制台有报错信息，因为我们把页面全都干掉了。
从报错信息来看，很明显，小程序默认会从 pages 字段中读取第一个地址，作为首页加载 -- 知识点。
Step 2. 增加 flex 页面
ok，现在开始添加我们的第一个页面，给它起个名字叫 flex 吧，防止大家 误以为名字叫 index 的才是默认打开的页面 :)
增加 flex 页面文件
├─ mypages/
├─ flex/
├─ flex.js
├─ flex.wxml
├─ flex.wxss
├── app.js
├── app.json
在 app.json 中增加 flex 页面的配置地址
"mypages/flex/flex"
想要 flex 页面生效，需要在 flex.js 中调用全局函数：
// flex.js
Page() 函数接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。
这时候再看下显示效果，已经没有报错信息了。
哗--!整个世界清净了 —— 《大话西游》
Step 3. 书写简单的 flex 布局页面
现在我们来实现一个简单的 flex 布局效果，就像微信官方平台展示的那个样子：
首先，在 flex.wxml 文件中增加布局标签：
&view class="section"&
&view class="section__title"&flex-direction: row&/view&
&view class="flex-wrp flex-row"&
&view class="flex-item bc_green"&1&/view&
&view class="flex-item bc_red"&2&/view&
&view class="flex-item bc_blue"&3&/view&
&view class="section"&
&view class="section__title"&flex-direction: column&/view&
&view class="flex-wrp flex-col"&
&view class="flex-item bc_green"&1&/view&
&view class="flex-item bc_red"&2&/view&
&view class="flex-item bc_blue"&3&/view&
然后在 flex.wxss 中，增加各 class 的样式：
.section__title{
padding: 40rpx;
.flex-wrp{
display: flex;
flex-direction: row;
.flex-row{
flex-direction: row;
.flex-col{
flex-direction: column;
.flex-item{
color: #fff;
width: 200rpx;
height: 200rpx;
text-align: center;
line-height: 200rpx;
.bc_green{
background-color: #09ba07;
background-color: #f76160;
background-color: #0faeff;
这里主要的东西就是关于 flex 的简单布局，想了解更多关于 flex 的同学，可以查阅下
一般情况下，不同的页面，都应该有一个独特的 title，这就需要我们就给 flex 添加一个独立的配置文件 flex.json：
"navigationBarTitleText": "Flex-布局"
注意，与最外层的 app.json 不同的地方是，flex.json 是对全局配置 app.json 的补充，且只能覆盖 app.json 的 window 字段配置信息
Step 4. 增加 list 页面
list 页面，多少会比 flex 要复杂些。
刚进入到页面时候，显示没有数据的提示信息。随着用户往下滑动，我们需要动态的增加数据，每下滑一次，增加 3 条数据吧，最多 30 条数据。
同样的，先增加需要的文件：
├─ mypages/
├─ flex/
├─ flex.js
├─ flex.wxml
├─ flex.wxss
├─ flex.json
├─ list/
├─ list.js
├─ list.wxml
├─ list.wxss
├── app.js
├── app.json
同时，我们对小程序增加一个 底部导航菜单，方便测试我们的页面切换。
修改 app.json 文件：
"mypages/flex/flex",
"mypages/list/list"
"window": {
"navigationBarBackgroundColor": "#09ba07",
"navigationBarTextStyle": "#fff",
"navigationBarTitleText": "牛刀小试",
"backgroundColor": "#fbf9fe",
"backgroundTextStyle": "light"
"tabBar": {
"color": "#999",
"selectedColor": "#2EBF76",
"borderStyle": "white",
"backgroundColor": "#f6f8f9",
"position": "bottom",
"list": [{
"pagePath": "mypages/flex/flex",
"text": "布局"
"pagePath": "mypages/list/list",
"text": "列表"
我们先来实现 js 部分的逻辑，由于需要把数据显示在视图 wxml 中，我们需要增加 data 字段 ：
arrList: []
这里说明下，wxml 中的动态数据均来自对应 Page 的 data。当 data 中的数据通过 this.setData 发生变化时候，视图会随之更新变化。
因为我们是在用户下滑时候更新数据，这里我们调用下 onReachBottom 函数（当到达页面底部时候触发）：
arrList: []
//微信官方提供的事件处理函数，当页面上拉触底时候自动调用该函数
onReachBottom(){
console.log('到达页面底部运行此函数')
然后我们开始增加数据的业务逻辑：
arrList: []
onReachBottom(){
console.log('到达页面底部运行此函数')
this.updateArrList();
updateArrList(){
let arr = this.data.arrList
arr.push( ...this.createData() )
this.setData({
arrList: arr
createData(){
let length = this.data.arrList.length
if(length &= 30 ) return [];
return Array.from({length: 3},(v, i)=&`数据${1+i+length}`)
当页面到达底部，会调用 onReachBottom 函数，在 onReachBottom 的最后，我们 尾调用 自定义的函数 updateArrList 来更新数据。
createData 函数的作用只是单纯的返回包含 3 个元素的数组，最后拼接后的新数据，会通过 setData 更新数据 arrList，当数据更新后，视图会自动更新。
接下来，我们修改视图文件 list.wxml：
&view class="container"&
&block wx:for="{{arrList}}" wx:key=""&
&view class="item"&
&text&{{item}}&/text&
&block wx:if="{{arrList.length==0}}"&
&view class="item"&
&text&下拉加载数据&/text&
block 标签并不属于组件，不会在页面中渲染，仅作接收控制属性用
for 循环指令包裹的范围内，子元素默认是 item，如果想重新定义它的名字，可以在 wx:for="{{arrList}}" 后面增加 wx:for-item="item"，同样的，也可以指定数组下标 wx:for-index="index"
我们对页面样式做简单的优化，由于当页面高度不够时候，难以操作触发 onReachBottom，故我们给当前的页面外层标签 page 加一个 150% 高度：
height: 150%;
background-color:#f6f8f9;
color:#9a9a9a;
font-size:14px;
padding: 10px 20px;
margin-bottom:15px;
同样的，我们也给 list 页面加一个 title，增加 list.json 文件：
"navigationBarTitleText": "展示数据"
大功告成！！！预览下小 demo 效果
如果之前有 appID，也可以在手机端预览
小程序：审核发布流程
官方文档比较详细了
下期更新内容：小程序初级入门教程－第二章：小程序中级实战教程：预备篇
iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。
iKcamp官网：
访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》。
包含：文章、视频、源代码
阅读(...) 评论()腾讯云开发微信小程序什么配置好用吗
腾讯云开发微信小程序什么配置好用吗，腾讯云的微信小程序。
腾讯云开发微信小程序什么配置好用吗，腾讯云的微信小程序。微信小程序对于创业者尤其是想通过庞大的超级数量的微信用户群来盈利的创业者来说都是不陌生的，要么正在用，要么也听说过。微信东家腾讯推出的腾讯云微信小程序普惠节无疑是对希望通过微信小程序赚钱的创业者来说是很大的利好。
腾讯云微信小程序，一键构建具备云端能力的专属小程序，提高小程序开发的效率；原生支持 HTTPS/WSS，证书申请部署对开发者透明，减少开发者不必要的麻烦；
提供完整的鉴权会话管理服务，保证帐号安全同时提升小程序开发的效率；提供 PaaS 级的 WebSocket 信道服务，降低开发者使用 WebSocket 通信的门槛；
我们来看看这次的微信小程序普惠节都有什么优惠或套餐值得一看吧：
1、精选小程序解决方案：无门槛获取小程序 5天无理由退款。
微信小程序解决方案，一站式部署小程序资源套件，简化开发、提升效率；更有丰富的小程序模板，满足电商/餐饮/O2O等多场景定制化需求。
2、微信小程序套餐：小程序主机 + 一级域名搭配优惠。最低可免费用3个月。
小程序主机，含1Mbps带宽，50GB系统盘；一级域名，可选择已有腾讯云下的域名或新购域名。
小程序套餐可以随心搭配，最优惠的搭配后仅需要11元：1核1G主机免费/首三个月+.xyz域名11元/年=11元。
3、微信小程序1元体验区（可体验7天）：
电商类的1元体验区，可以体验到的小程序功能有：门店预约消费会员充值积分兑换、单店多店 分销 会员积分 促销、五站合一 让订单&飞起来&等
餐饮外卖类可以体验到的小程序功能有：一桌一码/餐后付款/在线点餐、外卖点餐 定位系统 支持定制、扫码买单 堂食外卖 排队订位等。
教育类的有：付费咨询 课程购买 教师预约、五站合一，大、中、小学教育机构首选；自由组合，完美搭配，标准化系统管理等。
家居类的有：家居商城、案例展示、装修费用估算、在线留言、在线客服、在线搜索 产品展示场景多样 一键下单 互联网家居生活等。
酒店类的有：LBS定位、商圈管理、酒店品牌管理、房价批量维护、订单管理、一键预定房间，一键呼叫客服、精准定位 在线展示预约 一站式酒店小程序 商家高效管理房态等。
还有更多其他的类别的小程序功能体验。5月23日，2018腾讯&云+未来&峰会在广州举行。会上，腾讯董事会主席兼首席执行官马化腾发表了主题为《智慧连接：云时代的创新与探索》的演讲，公布了腾讯云战略的目标。
腾讯云宣布了新一轮的核心产品价格下调，涉及产品包括CVM、CDN、数据库、COS存储等。此轮价格调整中，腾讯云CVM多款产品降价，AMD标准型实例降价30%，搭载英伟达P40卡的GPU机型GN8在西南地区降价20%，而为批量计算量身打造的离线计算机型降价50%。同时，CDN官网也全线降价，最高降幅达20%，西南区（成都、重庆）数据库全线产品降价30%，此外，COS存储西南区（成都、重庆）降价24%，低于行业均价33%，达到全球最低价。不仅如此，腾讯云还宣布数十种AI应用服务将能够全部免费接入。
腾讯云CDN有1300多个节点和100T储备带宽，支撑腾讯云成为亚洲总体业务规模最大的CDN服务商。同时，腾讯云CDN单业务带宽突发超过30T+，并能承受最高1.2T+单次攻击流量，在业务突发应对能力和安全防护能力方面领先于整个行业。腾讯云微信小程序搭建的操作步骤：
第一步：准备账号
注册微信小程序 &（你得有个微信公众号）
注册腾讯云帐号 &（你还得有个腾讯云账号，QQ登录也可以的，但要实名认证哟）
第二步：关联帐号
关联微信小程序与腾讯云帐号，账号关联才能实现一站式解决。如何绑定微信小程序账号到腾讯云？进入腾讯云账号中心，点击微信公众平台登录后面的【关联】按钮即可关联：如下图
第三步：开通环境
开通开发环境和开通生产环境。
为了方便开发调试，防止影响到线上服务，腾讯云提供开发和生产两套环境，两套环境的代码部署、运行、与数据库是完全隔离的。
两套环境拥有以下特点：
开发环境&&&&
自动分配测试用二级域名：xxxxxxx.qcloud.la
自动部署免费 HTTPS
仅可用于线上调试，不可发布
代码部署、运行和数据库与生产环境完全分开
与微信开发工具打通，可一键部署、调试、重启和恢复代码
生产环境&&&&&
用户需购买或使用已有的腾讯云域名
自动部署免费 HTTPS
用于线上发布，不可调试
使用微信开发工具上传代码，在腾讯云控制台操作部署，上传和发布分离，降低误操作风险
第四步：搭建小程序
PHP 方案开通指引：（1）通过微信公众平台授权登录腾讯云（2）安装开发工具（3）初始化 Demo
自行部署适用于想将腾讯云 Wafer SDK 和 Demo 部署在自己的服务器上以获得更高的灵活性和操纵权限的用户。部署过程需要从零开始搭建线上环境，需要有一定的 Linux、PHP 基础。如果您符合以上需求和条件，可以自行部署。
上一篇：暂无下一篇：暂无
腾讯云热卖优惠券：
免责声明：本信息只供网友分享参考，信息内容涉及的内容解释权归活动商家或活动店铺所有。购物前请向商家或店铺客服了解详情，享优惠不承担任何售前或售后服务咨询及任何连带责任。网购有风险，请亲们慎重选购！
优惠信息推荐
热门搜索榜
享优惠由广州创源信息科技有限公司运营 &
增值电信业务经营许可证云商铺开发小程序要多少？_百度知道
云商铺开发小程序要多少？
我有更好的答案
这个需要根据需求功能而定的吧，不知道你说的是不是福建的那个。还有就是根据开发周期而定，要多少么有特别固定，一些太便宜来的更是要特别谨慎，不然后期需要维护时候会让人经常有要砸东西的冲动。
为您推荐：
其他类似问题
您可能关注的内容
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。扫一扫体验手机阅读
创业者是否值得投入做微信小程序（应用号）
<span type="1" blog_id="1862160" userid='
分享到朋友圈
关注作者，不错过每一篇精彩查看: 1108|回复: 7
牛刀平台制作的小程序微店模版－牛刀小店发布体验版了
主题帖子积分
牛刀小店应用模版基于牛刀云平台的小程序制作能力制作开发，帮助开发者和商家轻松构建独立专属的小程序微店。
移动端功能包括：商品分类商品展示商品详情购物车立即购买订单详情订单查询优惠券地址管理门店信息意见反馈等；
管理后台功能包括：商品管理订单管理营销管理微信管理店铺管理数据分析等
基于小程序微店应用模版建立和部署的应用－牛刀小店已经上线微信小程序，在微信里扫描二维码或小程序中搜索“牛刀小店”即可访问体验。
牛刀小店.jpg (51.11 KB, 下载次数: 0)
19:16 上传
牛刀小店2.jpg (53.4 KB, 下载次数: 0)
19:16 上传
牛刀小店应用模版已经发布到了牛刀市场中，搜索“牛刀小店”即可找到，可使用模版建立自己的小程序微店应用，包含全套源码哦。
牛刀小店模版.jpg (40.19 KB, 下载次数: 1)
19:23 上传
牛刀小店的后台管理能力也不错哦。
牛刀小店管理后台.jpeg (133.35 KB, 下载次数: 0)
19:24 上传
和牛刀小店一同发布的还有微信支付组件、小程序登录服务组件等，欢迎试用体验、欢迎提宝贵意见，我们会持续完善！
主题帖子积分
高级会员, 积分 522, 距离下一级还需 478 积分
高级会员, 积分 522, 距离下一级还需 478 积分
太棒了，牛刀，越来越好了。
主题帖子积分
中级会员, 积分 298, 距离下一级还需 202 积分
中级会员, 积分 298, 距离下一级还需 202 积分
这么好的小程序，为啥不带&&订单打印功能呢？？？？
主题帖子积分
这么好的小程序，为啥不带&&订单打印功能呢？？？？牛刀小店才发布第一个小版本，接下来还会持续完善，功能也会逐步增加，欢迎提出改进意见！
主题帖子积分
新手上路, 积分 3, 距离下一级还需 47 积分
新手上路, 积分 3, 距离下一级还需 47 积分
测试了一下，填写收货地址没有江西省的选择。
另：创建了一个小程序，选择了这个模版，发布正式版本时，在选择集群时无法选择，请问该如何操作？
主题帖子积分
测试了一下，填写收货地址没有江西省的选择。
另：创建了一个小程序，选择了这个模版，发布正式版本时，在 ...
购买主机才可以正式部署
主题帖子积分
新手上路, 积分 3, 距离下一级还需 47 积分
新手上路, 积分 3, 距离下一级还需 47 积分
后台管理的代码怎么导出？
Powered by