微信小程序进阶

微信小程序和微信公众号不能同时用一个账号。     一个微信公众号可以关联多个小程序。

公众号账号是 [email protected]

登录地址  可用账号和扫码登录  https://mp.weixin.qq.com/

 

小程序的账号是 [email protected]         只能用此账号登录小程序进行 发版 查看

登录地址  只能用账号登录  https://mp.weixin.qq.com/

 

小程序官方详细文档:https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html

 

小图标地址:https://www.iconfont.cn/collections/detail?cid=29

 

1.git版本管理

    a.登录代码管理, 新建一个项目。:https://git.weixin.qq.com/users/authorize#wechat_redirect

    b.微信开发者工具,版本管理

    设置选项,

    设置远程: 添加远程仓库。

    设置网络和认证:网络代理设置-自动   

                                 认证方式-使用用户名和密码(即注册时候的账号和密码)

                                  

   c.开发者工具中,右键远程:添加远程仓库即可。

                                                  

2.wxml文件的使用

    wxml文件的标签使用语法文档:  https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/

    参考文档:https://www.cnblogs.com/echolun/p/11094605.html

    {{}}   表达式来绑定解析JS文件中定义的变量

 {{}}中除了单纯的解析变量,还能做简单的逻辑运算

    a.算术计算

        <text>{{num1+num2}}</text>

    b.字符串拼接

        <text>{{"听风是风"+str}}</text>

    c.三元表达式

        <text>{{userName?userName:'登录'}}</text>

    d.条件逻辑

        <text wx:if="{{bool}}">我叫听风是风</text>

    e.特殊组件

        <block wx:if="{{bool}}">

            <text>我叫听风是风,</text>

        </block>

        block : block本身不会被渲染,只起到容器的作用,比如当bool为true可以看到wxml中并没有渲染block组件

        <view wx:for="{{array}}" wx:for-index="index" wx:for-item="item">

            第{{index}}个元素是: {{item}}

        </view>

 

    <view> {{message}} </view>        相当于div标签

    <text>深山夕照深秋雨。</text>    相当于span标签

    <image bindload='imgLoad' src='https://d.jpg'></image>    相当于img标签   

    bindload图片加载完成后执行的函数。  lazy-load  懒加载函数

    <button bindtap="alert">bindtap</button>    <button bind:tap="alert">bindtap</button>

    bindtap   bind:tap  相当于点击事件

             

    

3.js文件的使用

    js文件用来处理业务逻辑绑定数据各种事件。

        

    a.绑定数据

    在js文件中,所有的数据处理都放在page属性中。

    其中data属性存放所有静态数据,在wxml中通过{{name}}即可获取到。

        

    b.函数事件

    函数与data属性同级,放在page属性中。

4..json文件的使用

    静态数据配置文件。

5.app.json

    {
  "pages":[ //页面数组
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light", //背景文本样式 可选light dark
    "navigationBarBackgroundColor": "#fff", //导航背景色,可定义任意颜色
    "navigationBarTitleText": "WeChat", //导航标题,可定义任意文本
    "navigationBarTextStyle":"black" //导航文本颜色,可选black white
  }
}

    a.pages

    pages 配置所有页面路径(如果删除某条路径,同步删除掉对应的页面文件,增加页面也是如此)。

    新增页面推荐做法是直接在pages数组中新增一条页面路径,保存后pages文件夹会自动生成一个新的页面

    b.windows

    windows配置所有页面的顶部背景颜色文字颜色标题等,这是全局的配置,所有页面都会生效。

    我们可以在单个页面json配置中定义独特的风格用于覆盖全局配置,

    c.注意

    json文件都是被包裹在{}中,并以key-value方式展示。注意,key只能加上双引号,没加双引号,或者加了单引号都会报错。

    json文件中无法使用注释,添加任意注释都会引发报错。

 

2.设置底部导航栏

    在app.json 文件中添加  tabBar  属性即可。

"tabBar": {

    "color": "#a9b7b7",

    "selectedColor": "#11cd6e",

    "borderStyle": "white",

    "list": [

      {

        "pagePath": "pages/index/index",

        "text": "首页",

        "iconPath": "images/index.png",

        "selectedIconPath": "images/indexselected.png"

      },

      {

        "pagePath": "pages/user/user",

        "text": "用户",

        "iconPath": "images/user.png",

        "selectedIconPath": "images/userselected.png"

      }

    ]

  }

3.

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章