如何从零开始开发一个小程序

开始
- 申请账号
- 开发设置
- 开发工具
- 新建小程序
阅读文档
- 模版语法
项目架构
开始编写
- 基础语法
- - wx:for循环
  - wx:if判断
- 页面导航
- 自定义组件引用
- 样式修改
- - 单行、多行省略
  - flex布局
  - grid布局
发布

开始

申请账号

小程序注册页

开发设置

登录小程序后台，我们可以点击左侧菜单 “开发”-“开发管理”,点击后正文上方点击 “开发设置” ,就看到小程序的 AppID(小程序ID) 了。
小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID （注意这里要区别于服务号或订阅号的 AppID）。
有了小程序帐号之后，我们需要一个工具来开发小程序。

开发工具

前往开发者工具下载页面，根据自己的操作系统下载对应的安装包进行安装,建议下载稳定版.
打开小程序开发者工具，用微信扫码登录开发者工具，准备开发你的第一个小程序吧！

新建小程序

小程序tab新建项目，给你的项目起一个好听的名字，填入刚刚申请到的小程序的 AppID，后端服务勾选 “不使用云服务” ，默认第一个ts官网基础模版即可,点击新建，你就得到了你的第一个小程序了，点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。

阅读文档

微信官方文档-小程序
建议有空把小程序相关文档都看一遍

模版语法

WXML语法参考

项目架构

原生开发 + vant weapp ui
组件: 原生组件
第三方组件: Vant Weapp
- 使用 Vant Weapp 前，请确保你已经学习过微信官方的小程序简易教程和自定义组件介绍。
icon: 阿里巴巴矢量图标库

开始编写

按照提示安装vant/weapp
- 步骤五 typescript 支持可以跳转,默认ts模版已经有了
- 点击工具 -> 构建 npm，并勾选使用 npm 模块选项，构建完成后，即可引入组件。

app.json 全局引入组件,其他页面或者组件都可以直接使用

  "usingComponents": {"van-search": "@vant/weapp/search/index","van-tab": "@vant/weapp/tab/index","van-tabs": "@vant/weapp/tabs/index","van-button": "@vant/weapp/button/index","van-grid": "@vant/weapp/grid/index","van-grid-item": "@vant/weapp/grid-item/index","van-icon": "@vant/weapp/icon/index"},

index.wxml直接使用

  <view><van-search value="{{ value }}"   bind:click-input="onSearch" disabled="{{true}}"/></view>

基础语法

wx:for循环

index.wxml
- wx:for-item=“item” 不需要重新命名,可以忽略不写

      <van-tab wx:for="{{ tabData }}" wx:for-item="item" wx:key="id" title="{{item.title}}">{{item.title}}</van-tab>

index.ts

Page({data: {value: "",voiceList: [],},onLoad() {let that = this;// 使用 Mockajax({data: "",fn: function (res: any) {//这里既可以获取模拟的resconsole.log(res.data);//修改data里数据that.setData({ voiceList: res.data });},mockConfig: {"data|50": [{"id|+1": 0,img: "@image('150x100', '#4A7BF7','#fff','pic')",title: "@ctitle(3,200)",name: "@cname()",time: '@datetime(M-dd)',play: "@float(1,160,0,9)",icon: "@image('5x10')",},],},});}
});

wx:if判断

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

页面导航

页面下方导航
app.json

{"pages": ["pages/index/index","pages/logs/logs","pages/subregion/subregion","pages/my/my","pages/components/ChaseItem/ChaseItem","pages/levelPage/search/search"],
"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页"},{"pagePath": "pages/subregion/subregion","text": "分区"},{"pagePath": "pages/my/my","text": "我的"}]}
}

自定义组件引用

index.wxml
- 需要用自定义组件的页面

<view class="page page-home"><van-tabs active="{{ active }}" bind:change="onChange"><van-tab wx:for="{{ tabData }}" wx:for-item="item" title="{{item.title}}"><hot-item voiceList="{{voiceList}}" wx:if="{{item.title == '热门'}}"/><chase-item wx:else/></van-tab></van-tabs>
</view>

index.json
- 配置自定义组件的名称和引用路径

{"usingComponents": {"hot-item": "../components/HotItem/HotItem","chase-item": "../components/ChaseItem/ChaseItem"}
}

ChaseItem.ts
- 自定义组件,ts文件的基础
- Component 配置自定义组件,properties 父组件的prop传入,data自己的数据自定义,observers 监听,methods 方法, ready 加载完成后调用接口

// pages/components/HotItem/index.tsComponent({properties: {// chaseList: { // 属性名},data:{chaseDaysData:[],btnList:[],recommendList:[],active:0},observers: {'chaseDaysData': function(chaseDaysData:any[]) {console.log('chaseDaysData',chaseDaysData)}},methods:{imageOnloadError(e:any){console.log("图片加载出错啦",e)},},ready(){let that = this;// 每天番剧ajax({data:"",fn:function (res:any) {//这里既可以获取模拟的resconsole.log(res.data)that.setData({chaseDaysData:res.data})},mockConfig:{'data|7': [{'id|+1': 1,'title|+1': ['一','二','三','四','五','六','日'],...Mock.mock({'items|7':[{'img': "@image('80x80', '#4A7BF7','#fff','pic')",'title': '@ctitle(4,10)',}]})}] }});}
})

样式修改

单行、多行省略

单行省略

  overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 160rpx;

多行省略

  text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;

flex布局

详见flex布局
- 弹性布局，用来为盒状模型提供最大的灵活性。

grid布局

详见CSS Grid 网格布局教程

网格布局适合下面的场景

  /* 上面 */display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;grid-row-gap: 10rpx; grid-column-gap: 10rpx;padding: 10rpx 10rpx;/* 下面 */display: grid;grid-template-columns: 1fr 1fr 1fr;grid-row-gap: 10rpx; grid-column-gap: 10rpx;padding: 10rpx 10rpx;

发布

右上角有上传按钮,点击即可.
在小程序-管理-版本管理,就可以看到上传的版本,点击提交审核即可,审核版本通过后,再次发布审核版本即可

如何从零开始开发一个小程序相关推荐

如何自己开发一个小程序？
如何自己开发一个小程序?如果是新手至少要1-3个月,所以不可能在这里一句几句就能把如何自己开发一个小程序说清楚.关于如何自己开发一个小程序的相关事项,如果开发的话,先下载微信开发工具,然后建立一个 ...
【如何开发小程序？】如何快速开发一个小程序
在过去,对于新手来说,如何开发一个小程序只需要半个月到一个月的时间来制作一个简单的小程序.在中间,您需要了解小程序代码的逻辑语言.您需要查看微信官方平台开发文档中的大量示例和示例.那么现在如何开发 ...
微信外卖小程序怎么计算与客户的距离_外卖订单少收益低？开发一个小程序皆可以提解决...
外卖是大部分上班族解决吃饭问题的不二之选,因此近几年来外卖行业发展的如火如荼.一些商家赚了个"盆满体满",一些商家却遭遇订单数量少.收益低等问题.因此这些商家都非常想知道,怎么做才 ...
怎么开发一个小程序？从零开始手把手教你
1.注册在微信公众平台注册小程序,完成注册后可以同步进行信息完善和开发. 2.小程序信息完善填写小程序基本信息,包括名称.头像.介绍及服务范围等. 名称不能重复,头像也是必须的,服务范围要写好不然 ...
如何开发一个小程序游戏？
小程序游戏开发需要开发人员具备以下几点能力: 有一定的编程基础,例如 JavaScript.TypeScript 至少熟悉一种游戏开发引擎,比如 Cocos.Unity等对游戏机制.游戏系统有一定的 ...
python如何开发小软件-Python程序员，如何快速开发一个小程序
要点: 小程序是前后端分离的. 前端使用的是微信自定义的一套规范wxml+wxss+json+js,本质还是html+css+js. 后台可以选用任何你熟悉的语言:Java,Python,PHP,Ru ...
git 创建webpack项目_从0到1开发一个小程序cli脚手架（一）创建页面/组件模版篇...
github地址: https://github.com/jinxuanzheng01/xdk-cli cli工具是什么? 在正文之前先大致描述下什么是cli工具, cli工具英文名command-l ...
国庆节，一天开发一个小程序+Web系统。2.5K到手。【分享开发经验】【收藏起来】
自从成为自由职业后.我对假期一点没有感觉! 甚至我忘了每天是几月几号!不装b的说,我真的体会不到节假日的那种快乐了! 如果想出去逛街,我想出去爬山,我想去公园散心,我都会避开节假日! 前天,有个粉丝朋 ...
【自己开发小程序】自己怎么开发一个小程序呢？
如何自己开发小程序?这是很多创业者甚至普通人的困惑.小程序不知道什么时候慢慢垄断了我们的生活.成为我们不可或缺的一部分.很多时候,当我们点奶茶扫自行车扫充电宝的时候,我们会第一时间想到小程序,甚至当我 ...

如何从零开始开发一个小程序

如何从零开始开发一个小程序

开始

申请账号

开发设置

开发工具

新建小程序

阅读文档

模版语法

项目架构

开始编写

基础语法

wx:for循环

wx:if判断

页面导航

自定义组件引用

样式修改

单行、多行省略

flex布局

grid布局

发布

如何从零开始开发一个小程序相关推荐

最新文章

热门文章