- 博客(16)
- 收藏
- 关注
RSS订阅原创 小程序完善用户信息——小程序入门与实战（16）
上一章节我们完成了小程序的登录功能。这一章节我们来讲解条件渲染跟小程序获取用户信息。条件渲染wx:if在上一章节我们使用了 wx:if,现在来给大家介绍。我们使用 wx:if="" 来判断是否需要渲染该代码块：wx:if=true 表示渲染该代码块。wx:if=false 表示不渲染该代码块。# wxml//当is_show 为 true 的时候就显示//当is_show 为 false 的时候就显示<view wx:if="{{is_show}
2020-06-15 10:53:12
1265
原创 小程序获取手机号——小程序入门与实战（15）
上一章节我们学习了小程序登录的部分流程，今天我们继续来把登录流程完善。小程序客户端将获取到的微信用户绑定的手机号传给后端，返回给小程序客户端自定义登录状态 token。获取手机号获取微信用户绑定的手机号，需先调用wx.login接口。请注意：需要用户主动触发才可以发起获取手机号接口，所以我们需要 button 组件的帮助。button 组件按钮，为表单组件。常用属性：open-type 微信开放能力，值为字符串。getPhoneNumber 获取用户手机号，可以从 bindgetph
2020-06-15 10:51:36
789
原创 个人中心页跟小程序登录流程—小程序入门与实战（十三）
在上一章节我们已经已经完成了首页，还剩“点赞” 跟 “分享” 我们在讲解了小程序登录之后讲解。设计稿先来分析一下设计稿由设计稿可以看出，个人中心分为3个状态。第一个为已经登录并且已经有头像昵称第二个为没有登录第三个为已经登录但是没有完善头像昵称由此我们可以思考出，需要先登录，然后完善头像昵称，才可以有第一张设计稿的样子。页面静态布局先把个3个状态先写出来，然后再来做处理#personl.wxml<view class="gj_personal_page&qu
2020-06-12 10:17:23
1318
原创 项目不同环境配置不同接口域名—小程序入门与实战（十二）
上一章节，我们讲了小程序得模块化，怎么封装wx.request来发送请求。这一章节我们讲的是开发项目过程中在开发环境，生产环境设置不同得请求接口域名。新建 config.js在 src/es6 目录，新建一个config.js文件export default { BRAND:{ name:'guojiangxiansir' }, GLOBAL: { baseUrl: process.env.NODE_ENV === 'd
2020-06-11 10:17:24
1148
原创 页面配置与Page页面生命周期—小程序入门与实战（八）
4-2在上一节，我们已经把 index.wxml 跟 index.wxss 写完了。这一件我们来讲 index.json 页面配置跟 index.js与小程序 page 页面生命周期。页面配置每一个小程序的页面也可以使用 .json 文件来对本页面的窗口表现进行配置。请注意： 页面中的配置项会覆盖 app.json 的 window 中相同的配置项。页面配置中只能设置 app.json 中 window 对应的配置项，以决定本页面的窗口表现，所以无需写 window 这个属性。# inde
2020-06-10 10:36:14
752
原创 前后台数据交互跟数据渲染—小程序入门与实战（九）
4-3上一章节我们了解了小程序的页面使用 Page({}) 注册，数据 data，生命周期函数，事件处理函数都可以被接收。先静后动，我们的首页已经是一个静态页面了，所以我们需要用数据来渲染首页。wx.request 后台数据交互发送 HTTPS 网络请求。wx.request({ url: 'https://guojiang.club/api/sir/card', //真实的接口地址 header: { 'content-type': 'ap
2020-06-10 10:34:45
847
原创 数据分页跟小程序触底事件—小程序入门与实战(十)
上一章节的知识真的是干货满满，学到了用 setData() 可以给数据赋值，可以使用 wx.request 发送 HTTPS 请求，使用{{}}绑定数据。不知道大家发现没有，后端给我们的数据是分页的。所以我们这章来学习小程序里数据分页应该怎么处理。分页数据的处理Page({ data:{ cardList:[],//列表 page:1,//当前页数 has_more:true // 是否还能分页 }, onLoad(){
2020-06-10 10:32:21
693
原创 小程序模块化—小程序入门与实战（十一）
上一章节我们讲了分页数据的处理， setData数据限制的解决办法，模板字符串以及触底分页获取数据。那么这一章节我们学习小程序的模块化。模块化可以将一些公共的代码抽离成为一个单独的js文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。通过 require方式引入exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采用 module.exports 来暴露
2020-06-10 10:28:28
637
原创 首页布局跟小程序如何配置Iconfont—小程序入门与实战（七）
4-1经过上一章节的学习我们已经搭建了项目的整个框架，雏形已成。接下来我们只需要的往里面堆东西就可以了。设计稿网址（14天分享有效，过期的可以找我拿）：https://lanhuapp.com/url/Airvn密码: I4DA分析首页设计稿写代码一定要注意细节和结构性，拿到设计图首先分析应该怎么做，应该有哪些模块，哪些模块可以通用，一定要经过设计之后再动手去写。 从设计稿可以看出，图片是通屏的。经过与设计师沟通，而且还是轮播图，上下滑动的。上面有“HOT” 跟 “衣品圈” 两个Tab切
2020-06-06 10:34:58
4526
原创 小程序生命周期跟全局样式—小程序入门与实战（六）
上一章节我们构建了小程序的第一个页面。3-6 app.js每个小程序都需要在 app.js 中调用 App 方法注册一个小程序实例。用白话说就是，你不注册它，你就不能拥有一个小程序。废话不多说，直接上代码。//app.jsApp({ onLaunch (options) { // 可以写代码 }, onShow (options) { // 可以写代码 }, onHide () { // 可以写代码 }})App(Object object)
2020-06-05 10:11:14
649
原创 配置小程序项目的第一个页面—小程序入门与实战（五）
上一小节我们虽然构建了项目的目录，也配置了几个必要文件，但是我们的项目还是不能编译起来，我们还需要完善app.json、app.js、app.wxss这3个文件跟之前我们说的src/pages/index文件夹。3-4 新建第一个页面有人会疑惑，为什么配置app.json之前需要新建第一个页面，你们忘记了吗？app.json里面有一个pages属性，是必选项。pages数组事页面路径列表。配置编辑器 less 自动 编译成 wxss因为我们是用 less 开发通过编辑器自动编译成 wxss，所以我
2020-06-04 10:22:19
810
原创 搭建项目框架—小程序入门与实战（四）
上一小节，我们学习了小程序的代码构成。接下来我们就可以学习来搭果酱先生这个项目的脚手架。之所以要自己搭建脚手架，是为了让 Webstorm 或者 VScode 可以实时编译小程序代码，提高开发效率。3-2 项目脚手架搭建果酱先生是使用 webpack，bable，less 开发的微信小程序项目，如果你还是新手不了解这些也没有关系，你只需要按照步骤一步步来也可以搭建好的。在搭建之前，你需要先安装以下应用程序即可：Node.js (版本需不低于 8.10，建议使用 Node.js 10.0 及以
2020-06-03 10:19:32
719
原创 小程序环境搭建—小程序入门与实战（二）
在学习这个小程序项目之前，黔在在碎碎念，光看不做是虚架子，你需要的是在电脑面前跟着我一步一步的实践，带你从 0 开始构建果酱先生这个项目。2-1 申请 AppId开发小程序的第一步。AppId 是什么我们每个人都有属于自己得身份证，AppId 就是小程序在小程序平台的身份证。也就是说，一个 AppId 只能对应一个小程序。步骤先注册一个属于自己的小程序账号。# 网址https://mp.weixin.qq.com/wxopen/waregister?action=step1注意：每个
2020-06-02 12:00:10
585
原创 小程序的代码构成讲解—小程序入门与实战（三）
上一章节我们已经知道如何申请小程序的AppId,并且也安装了微信开发者工具。接下来我们需要了解小程序的代码构成。3-1 官方种子项目与小程序代码构成在上一章节我们已经利用微信开发者工具快速构建了一个名称为 HelloWorld的 小程序项目，可以借这个项目来看看。点击菜单栏 “编辑器” ，就可以看到这个小程序的代码构成了了。可以看出构建小程序项目，根目录下必须要有 app.js,app.json,app.wxss 这3个文件。pages 目录是用于存放页面，每个页面就是一个文件夹，分别由.js
2020-06-02 10:28:10
1076
原创 小程序课程介绍—微信小程序入门与实战
课程介绍教你从 0 开始构建果酱先生这个小程序项目，项目每个页面都是干货，让你学到小程序的核心技术。小程序目录结构搭建项目脚手架，实现webpack工程化小程序开发view、image、swiper等组件的应用如何配置文件，page页面生命周期，数据绑定、缓存，列表渲染，条件渲染封装微信请求 wx.request，调用服务器 API 获取数据，填充与解析数据分页数据的处理、触底刷新，小程序分享小程序登录、授权获取用户信息头像昵称，交互反馈api从本地选择图片，上传图片，发布打卡，点赞与取
2020-06-01 19:31:06
1025
原创 小程序环境搭建—小程序入门与实战（二）
在学习这个小程序项目之前，黔在在碎碎念，光看不做是虚架子，你需要的是在电脑面前跟着我一步一步的实践，带你从 0 开始构建果酱先生这个项目。2-1 申请 AppId开发小程序的第一步。AppId 是什么我们每个人都有属于自己得身份证，AppId 就是小程序在小程序平台的身份证。也就是说，一个 AppId 只能对应一个小程序。步骤先注册一个属于自己的小程序账号。# 网址https://mp.weixin.qq.com/wxopen/waregister?action=step1注意：
2020-06-01 19:16:32
263
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人