E企盈营销工具技术服务商 热线:4006-838-530

10分钟入门微信小程序开发

E企盈直播平台营销卖货系统

注册微信小程序如果你还没有微信公众平台的账号,请先进入微信公众平台首页,点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信,我们选择 “小程序” 即可。接着填写账号信息,需要注意的是,填写的邮箱必须是未被微信公众平台注册、未被个人微信号绑定的邮箱,而且每个邮箱仅能申请一个小程序。激活邮箱之后,选择主体类型为 “个人类型”,并按要求登记主体信息。主体信息提交后不可修改,该主体将成为你使用微信公众平台各项服务和功能的唯一法律主体与缔约主体,在后续开通其他业务功能时不得变更或修改。一切 OK 就可以直接进入小程序的管理平台了。如果直接跳转失败,也可以从微信公众平台上手动登录。填写小程序的基本信息,包括名称、图标、描述等。提交成功之后,再添加开发者。开发者默认为管理员,我们也可以从这里新增绑定开发者,这是管理员才有权限的操作。然后在左侧导航栏点击 “设置”,找到开发设置,获得小程序的 AppID。微信开发者工具下载微信web开发者工具,根据自己的操作系统下载对应的安装包进行安装即可。打开开发者工具,用微信扫码登录开发者工具,准备开发你的第一个小程序吧!第一个小程序新建项目打开开发者工具,选择 “小程序项目”,点击右下角的 “+” 新建项目。选择一个空的文件夹作为项目目录,填入刚刚的 AppID,再填写一个项目名称,比如我这里叫做 GoZeroWaster。点击 “确定” 进入工具主界面。项目目录结构微信小程序的基本文件构造和项目目录结构说明如下:    .    ├── app.js     # 小程序的逻辑文件    ├── app.json   # 小程序的配置文件    ├── app.wxss   # 全局公共样式文件    ├── pages      # 存放小程序的各个页面    │   ├── index  # index页面    │   │   ├── index.js     # 页面逻辑    │   │   ├── index.wxml   # 页面结构    │   │   └── index.wxss   # 页面样式表    │   └── logs   # logs页面    │       ├── logs.js      # 页面逻辑    │       ├── logs.json    # 页面配置    │       ├── logs.wxml    # 页面结构    │       └── logs.wxss    # 页面样式表    ├── project.config.json    └── utils        └── util.js根目录下有3个文件:app.js、app.json、app.wxss,小程序必须有这3个描述 APP 的文件,并放在根目录下。这3个是应用程序级别的文件,与之平行的还有一个 pages 文件夹,用来存放小程序的各个页面。我们可以和 web 前端开发技术做个类比:wxml 类似于 HTML 文件,用来编写页面的标签和骨架,但里面只能用小程序自己封装的组件;wxss 类似于 CSS 文件,用来编写页面样式,只是把 css 文件换成了 wxss 文件;js 文件类似于前端编程中的 JavaScript 文件,用来编写小程序的页面逻辑;json 文件用来配置页面的样式和行为。目标成果我们先来看看最终的目标和成果,很简单,一共两页:(为了让广大程序员也能保护环境和热爱生活,我特意选了 “零垃圾生活” 主题来做 Demo)步骤分解Demo 代码下载:https://gitee.com/luhuadong/Web_Learning/tree/master/WeChat/GoZeroWaster分解目标成果:个人中心生活指南模拟弹窗预览图片页头页尾在目标成果预览中我们看到,两个页面都有共同的部分 —— 页头和页尾。所以在构建页面内容之前,我们先把页头和页尾处理好。我们很容易猜到,这两部分属于小程序的全局配置,因此需要修改 app.json 文件。最初的内容如下:    {        “pages”:[            “pages/index/index”,            “pages/logs/logs”        ],        “window”:{            “backgroundTextStyle”: “light”,            “navigationBarBackgroundColor”: “#fff”,            “navigationBarTitleText”: “WeChat”,            “navigationBarTextStyle”: “balack”        }    }pages 属性用来设置页面路径,它是一个数组,每一项都是字符串来指定小程序由哪些页面组成。数组的第一项代表小程序的初始页面。小程序中新增或减少页面,都需要对 pages 数组进行修改。window 属性用于设置小程序的状态栏、导航条、标题、窗口背景色。我们把页头的标题和颜色修改一下,页尾部分我们做一个 tab 栏来切换页面,这个属性叫做 tabBar,代码如下:{  “pages”:[    “pages/index/index”,    “pages/logs/logs”  ],  “window”:{    “backgroundTextStyle”:”light”,    “navigationBarBackgroundColor”: “#2f2f8f”,    “navigationBarTitleText”: “GoZeroWaste”,    “navigationBarTextStyle”:”white”  },  “tabBar”:{    “color”: “#bfc1ab”,    “selectedColor”: “#13b11c”,    “backgroundColor”: “#1f1f4f”,    “list”: [      {        “pagePath”: “pages/index/index”,        “iconPath”: “image/icon_component.png”,        “selectedIconPath”: “image/icon_component_HL.png”,        “text”: “个人中心”      },      {        “pagePath”: “pages/details/details”,        “iconPath”: “image/icon_API.png”,        “selectedIconPath”: “image/icon_API_HL.png”,        “text”: “生活指南”      }    ]  }}(所用到的图片放在项目的 image 目录,你也可以使用自己的图片)这里用到几个 tabBar 的属性是 color、selectedColor、backgroundColor 和 list,list 是一个数组,主要用于设定导航的路径。CTRL + S 保存之后,模拟器就会自动刷新,马上可以看到效果。个人中心简单起见,我们就在 pages/index 目录下实现 “个人中心” 页面好了。双击打开 index.wxml,初始内容如下:    <!–index.wxml–>    <view class=”container”>      <view class=”userinfo”>        <button wx:if=”{{!hasUserInfo && canIUse}}” open-type=”getUserInfo” bindgetuserinfo=”getUserInfo”> 获取头像昵称 </button>        <block wx:else>          <image bindtap=”bindViewTap” class=”userinfo-avatar” src=”{{userInfo.avatarUrl}}” background-size=”cover”></image>          <text class=”userinfo-nickname”>{{userInfo.nickName}}</text>        </block>      </view>      <view class=”usermotto”>        <text class=”user-motto”>{{motto}}</text>      </view>    </view>这里已经有一些代码了,虽然现在可能还看不懂,但我们知道,这就是现在页面的源代码。我们把 “Hello World” 部分注释掉,增加我们希望显示的内容:<!–index.wxml–><view class=”container”>  <view class=”userinfo”>    <button wx:if=”{{!hasUserInfo && canIUse}}” open-type=”getUserInfo” bindgetuserinfo=”getUserInfo”> 获取头像昵称 </button>    <block wx:else>      <image bindtap=”bindViewTap” class=”userinfo-avatar” src=”{{userInfo.avatarUrl}}” background-size=”cover”></image>      <text class=”userinfo-nickname”>{{userInfo.nickName}}</text>    </block>  </view>   <!– <view class=”usermotto”>    <text class=”user-motto”>{{motto}}</text>  </view>  –>  <view class=”ID_Badge”>    <view>      <text class=”ID_info”>{{company}}</text>    </view>    <view>      <text class=’ID_info’>{{position}}</text>    </view>    <view>      <text class=’ID_info’>{{lesson}}</text>    </view>  </view></view>这里分别使用 {{company}}、{{position}} 和 {{lesson}} 作为占位符,用法类似于 Django 的模板语言。当然也可以直接用相应的字符来替换它,只不过我们想沿用 {{motto}} 的做法,让你知道在哪里修改这些数据。没错,就是在 index.js 文件:Page({  data: {    motto: ‘Hello World’,    company: “GoZeroWaste”,    lesson: “21天零垃圾生活指南”,    position: “垃圾魔法师”,    /* … */  },wxml 文件中的 <view> 组件类似于网页开发中的 <div>,而 <text> 组件是用来写文本的,需要注意的是 <text/> 组件内只支持 <text/> 嵌套。当然,可用用 <image> 插入图片,图片要保存到 image 目录,否则在测试的时候是无法上传的。    <view class=”ID_Badge”>        <!– 省略 –>        <view>          <text class=’ID_info’>{{lesson}}</text>        </view>        <view>          <image class=’pic’ mode=’widthFix’ src=’../../image/GoZeroWaste.jpg’></image>        </view>      </view>mode=‘widthFix’  表示以宽度不变,高度自动变化,保持原图宽高比不变的方式进行缩放以适应屏幕大小。接下来还需要修改 index.wxss 文件来设置样式:/**index.wxss**/.userinfo {  display: flex;  flex-direction: column;  align-items: center;}.userinfo-avatar {  width: 128rpx;  height: 128rpx;  margin: 20rpx;  border-radius: 50%;}.userinfo-nickname {  color: #aaa;}.usermotto {  margin-top: 200px;}.ID_Badge {  padding-top: 20rpx;  color: blue;}.ID_info {  display: flex;  flex-direction: column;  align-items: center;}.pics {  width: 400rpx;}保存刷新,“个人中心” 页面就完成了。生活指南原来的项目中 pages 目录下只有 index 和 logs 两个目录,因此我们还需要为第二个页面创建一个目录。创建页面有两种方法:在目录结构的 pages 图表上,新建目录,然后在目录下逐一创建页面构成文件在 app.json 下,直接添加建议采用第二种方法,修改 app.json 文件:    {      “pages”:[        “pages/index/index”,        “pages/logs/logs”,        “pages/details/details”      ],保存刷新之后就会发现,目录结构里自动创建了这一页。对应的,也要修改 app.json 中的 tabBar 的链接(实际上我们已经做了):    {            “pagePath”: “pages/details/details”,            “iconPath”: “image/icon_API.png”,            “selectedIconPath”: “image/icon_API_HL.png”,            “text”: “生活指南”        }然后修改 details.wxml 设置这一页的标题:    <!–pages/details/details.wxml–>    <view>      <view class=’title’>        <text>21天零垃圾生活指南</text>      </view>    </view>

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 10分钟入门微信小程序开发
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏